Question

我有一个组件层次结构：

App
|
Child
|
Input

组件“Child”接受来自其父级的模板，如下所示：

<my-child>
    <ng-template>
        <my-input></my-input>
        <span>asdasdas</span>
        <my-input></my-input>
        <my-input></my-input>
    </ng-template>    
</my-child>

正如您在模板中看到的那样，有许多输入组件。现在我希望能够访问子组件中的<my-input>组件列表。我现在尝试的是使用@ ContentChildren / @ ViewChildren，但似乎没有上班。子组件的代码：

@Component({
  selector: 'my-child',
  providers: [],
  template: `
    <div>
      <ng-template [ngTemplateOutlet]="inputTemplate" #input></ng-template>
    </div>
  `,
  directives: []
})

export class Child implements OnInit, OnAfterViewInit {

  @ContentChild(TemplateRef) inputTemplate: TemplateRef<any>;

  @ViewChildren(InputComponent) inputComponents : QueryList<InputComponent>;

  constructor() {

  }

  ngAfterViewInit(){
    //THIS SHOULD NOT BE EMPTY
    console.log(this.inputComponents.toArray());
  }
}

请让我知道我做错了什么，以及如何从Child组件中获取InputComponents列表。

也许我不应该在这里使用模板？有没有其他方法可以自定义此控件并仍然能够访问嵌套的InputComponents列表？

如果你想玩它here's the plunker

Answer 1

使用@ContentChildren(InputComponent)代替@ViewChildren()并订阅更改

  ngAfterViewInit(){
    //THIS SHOULD NOT BE EMPTY
    this.inputComponents.changes.subscribe(c => console.log(this.inputComponents.toArray()));
    //console.log(this.inputComponents.toArray());
  }

为我工作，但说实话，我不知道为什么@ContentChildren()代替@ViewChildren()正在发挥作用。

Plunker link

Angular 4 - 如何访问模板中的嵌套组件？

1 个答案: