angular - Angular 2引用@ContentChild的动态实例

我正在使用Angular 2.0.1。

我有一个可以通过<ng-content>接受任何其他组件的组件-效果很好。

我遇到的问题是当我想引用注入(inject)的组件时。

如果我知道<ng-content>只会是一个组成部分，我可以说:@ContentChild(MyComponent) dynamicTarget: IMyComponent;，但是因为它可以是任何组件(我要做的唯一假设是任何注入(inject)的组件都实现了特定的接口(interface))，所以变得更加棘手。

我也尝试过<ng-content #dynamicTarget'>，然后通过说@ContentChild('dynamicTarget') dynamicTarget: IMyComponent;来引用它，但这返回未定义。

有谁知道我该如何告诉Angular 2这个东西是一个组件的实例，以便我可以尝试在其上调用一个函数？

为了进一步说明用例，我有一个多步骤向导，可以将任何组件作为内容，并且我想在内容上调用validate函数(同样，我会假设在上述实例中存在该函数)

最佳答案

一种方法是为任何动态组件提供相同的#id。
我给了#thoseThings。 (我认为它与@Missingmanual几乎相同)

PLUNKER(请参阅控制台以获取匹配项。)

@Component({
  selector: 'my-app',
  template: `
  <div [style.border]="'4px solid red'">
    I'm (g)Root.

    <child-cmp>
      <another-cmp #thoseThings></another-cmp>
    </child-cmp>
  </div>
  `,
})
export class App {
}


@Component({
  selector: 'child-cmp',
  template: `
    <div [style.border]="'4px solid black'">
        I'm Child.
      <ng-content></ng-content>
    </div>
  `,
})
export class ChildCmp {
  @ContentChildren('thoseThings') thoseThings;

  ngAfterContentInit() {
    console.log(this.thoseThings);

    this.validateAll();

    if(this.thoseThings){
     this.thoseThings.changes.subscribe(() => {
       console.log('new', this.thoseThings);
     })
    }
  }

  validateAll() {
    this.thoseThings.forEach((dynCmp: any) => {
      if(dynCmp.validate)
       dynCmp.validate();  // if your component has a validate function it will be called
    });
  }
}


@Component({
  selector: 'another-cmp',
  template: `
    <div [style.border]="'4px solid green'">
        I'm a Stranger, catch me if you can.
    </div>
  `,
})
export class AnOtherCmp {
}