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和包装器中。似乎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;

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

1 个答案: