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();
  }
}

当在 template/page 中使用该组件时，它大致如下所示：

<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 组件 - 如何获取内容中的所有输入

Angular 5 Component - How Can i get all inputs inside the content

angular-components

angular