Angular 2 引用@ContentChild 的动态实例

Question

我正在使用 Angular 2.0.1.

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

我运行遇到的问题是当我想引用注入的组件时。

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

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

有谁知道我怎么知道 Angular2 这个东西是一个组件的实例，这样我就可以尝试调用它的函数？

为了进一步阐明用例——我有一个多步骤向导，可以将任何组件作为内容，我想对内容调用 validate 函数（同样，我会假设存在于所述实例上）

Answer 1

超类查询 曾经在旧版本中工作 https://github.com/angular/angular/issues/8580 但我无法使其与 NgModule 一起工作

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Parent, Transcluded1, Transcluded2 ],
  providers: [
    {provide: TranscludedBase, useExisting: Transcluded1, multi:true}
    {provide: TranscludedBase, useExisting: Transcluded2, multi:true}
  ],
  bootstrap: [ App ]
})

Plunker example

您可以使用 动态组件创建 和向导步骤而不是选项卡。
另一种方法是除了投影元素外，还明确地将元素传递给输入：

Plunker example

Answer 2

如果您知道您的所有组件都将具有 validate 并实现相同的接口，例如IValidate，那么你可以说

@ContentChild('IValidate') dynamicTarget: IValidate;
// ...
this.dynamicTarget.validate();

Angular 不关心确切的 class 只要它适合请求的界面。

Answer 3

一种方法可能是为任何动态组件提供相同的 #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 {
}

Angular 2 引用@ContentChild 的动态实例

Angular 2 referencing dynamic instance of @ContentChild

typescript

angular2-ngcontent

angular