angular - 如何在 View 初始化之前访问投影的 DOM？

Question

给定以下组件:

@Component({
  selector: "form-control",
  template: `
    <div class="form-group" #div>
      <label [for]="inputId">{{label}}</label>
      <ng-content></ng-content>
      <small [id]="helpId" class="form-text text-muted">{{help}}</small>
    </div>
  `,
})
export class FormControlComponent {

如何访问我的调用者提供给 <ng-content> 的 DOM 元素获取它的 id(或设置一个，如果 id 未定义)？

我尝试过的

我尝试使用 @ViewChild("div") ，并在 ngAfterViewInit() 中检查 DOM，并能够访问输入，但将它的 id 传播到外部组件 this.inputId = input.id造成了ExpressionChangedAfterItHasBeenCheckedError ，因为 Angular 已经评估了 inputId .

然后我尝试使用 @ContentChild ，但不想要求调用者提供模板变量，而 @ContentChild(NgControl)匹配指令，我不知道如何获取该指令的 DOM 元素。

Answer 1

事实证明，如果已知元素被指令装饰，这真的很容易:

export class FormControlComponent implements AfterContentInit {

  @ContentChild(NgControl, {read: ElementRef}) inputRef: ElementRef;

  ngAfterContentInit() {
    const input = <HTMLInputElement> this.inputRef.nativeElement;
    // do what you want here
  }
}

angular 文档确实可以提到 read 的允许值 :-)