typescript - Angular2 - ContentChild 查询找不到嵌套组件

Question

我正在尝试设置一个 Angular2 组件，自动聚焦通过内容投影插入的输入元素。

我使用的解决方案基于 this answer .我有一个额外的要求，即输入元素可能嵌套在另一个组件中。但是，我发现 ContentChild 查询无法检测到隐藏在 ng-content 标签深处的元素。

@Component({
  selector: 'inner-feature',
  template: "<input auto-focus>",
  directives: [AutoFocus]
})
export class InnerFeature { }

@Component({
  selector: 'feature',
  template: `
    <div [class.hide]="!show">
      <ng-content></ng-content>
    </div>
  `
})
export class Feature {
  @ContentChild(AutoFocus)
  private _autoFocus: AutoFocus;

  private _show: boolean = false;

  @Input()
  get show() {
    return this._show;
  }
  set show(show: boolean) {
    this._show = show;
    if (show && this._autoFocus) {
      setTimeout(() => this._autoFocus.focus());
    }
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <button (click)="toggleFeature()">Toggle</button>
      <feature [show]="showFeature">
        <inner-feature></inner-feature>
      </feature>
    </div>
  `,
  directives: [Feature, InnerFeature]
})
export class App {
  showFeature: boolean = false;

  toggleFeature() {
    this.showFeature = !this.showFeature;
  }
}

_autoFocus 属性永远不会被填充。对比一下 auto-focus 指令没有嵌套在另一个组件中并且工作正常的情况。有什么办法可以做到这一点吗？

(我没有粘贴 AutoFocus 的代码，因为它对这个例子并不重要。)

参见 Plunker用于演示。

已更新上面的代码以修复缺失的指令。

Answer 1

使用 ContentChildren 并将 descendants 设置为 true

@ContentChildren(AutoFocus, { descendants: true })