Angular 5组件-如何获取内容中的所有输入

Question

我正在研究组件，我想实现一个功能，该功能着眼于ng-content内部的第一个输入元素。

因此，我严格按照以下模板代码尝试此操作，并尝试使用ViewChildren和ContentChildren。

@Component({
  selector: '[my-component]', // tslint:disable-line
  template: `<div class="my-container">
        <ng-content></ng-content>
      </div>`
})
export class MyComponent implements AfterViewInit, OnDestroy {

  @ViewChildren('input') vc;
  @ContentChildren('input', {descendants: true}) cc;

  ngAfterViewInit() {
    //Nothing in either QueryList ???
    console.log(this.vc, this.cc);
  }

  focus () {
    //Nothing in either QueryList ???
    this.vc.first.nativeElement.focus();
  }
}

在模板/页面中使用组件时，它看起来大致如下：

<div my-component>
  <div class="field"><input></div>
  <div class="field"><input></div>
  <div class="field"><input></div>
  <div class="field"><input></div>
  <div class="field"><input></div>
</div>

再说一遍，我想获得的是所有出现在内容中的输入元素，它们也可以埋在div和wrapper中。看来ContentChildren应该是正确的，但它没有返回任何元素。即QueryList.results为空。

我在做错什么或如何在内容区域内获取输入？

Answer 1

@ViewChildren装饰器同时支持指令类型或组件类型作为参数。还支持模板变量的名称，即#ref定义。所以我相信如果您举个例子

<div my-component>
  <div class="field"><input #myInput></div>
  <div class="field"><input #myInput></div>
  <div class="field"><input #myInput></div>
  <div class="field"><input #myInput></div>
  <div class="field"><input #myInput></div>
</div>

然后

@ViewChildren('myInput') vc;