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，并且能够访问输入，但是使用this.inputId = input.id将其传播到外部组件导致{ {1}}，因为角度已经评估过ExpressionChangedAfterItHasBeenCheckedError。

然后我尝试使用inputId，但是不想要求调用者提供模板变量，而@ContentChild匹配指令时，我不知道如何获取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
  }
}

有角度的文档确实可以提到read的允许值： - ）

如何在查看init之前访问投影的DOM？

1 个答案: