Angular 指令 - ElementRef - 不能从 mat-form-field select mat-select

Question

我正在尝试通过指令访问 mat-form-field 中的 mat-select。

@Directive({ selector: "[appMatSelectLoader]" })
export class MatSelectLoaderDirective {
    constructor(el: ElementRef) {
        console.log((el.nativeElement as HTMLElement).querySelector("mat-select"));
    }
}

我在控制台中得到 null。但是，当我这样做时：

console.log((el.nativeElement as HTMLElement));

我确实在控制台中看到了 mat-select：

我在这里错过了什么？？

指令的应用方式如下：

<mat-form-field appearance="fill" appMatSelectLoader>
    <mat-select required>
        <mat-option *ngFor="let option of options" [value]="option.id">
            {{ option.name }}
        </mat-option>
    </mat-select>
</mat-form-field>

Answer 1

您正试图在视图初始化之前查询 dom

export class MatSelectLoaderDirective implements AfterViewInit {
  el: ElementRef;
    constructor(el: ElementRef) {
      this.el = el;
    }
    
    ngAfterViewInit () {
        console.log((this.el.nativeElement as HTMLElement).querySelector("mat-select"));
    }
}

Angular 指令 - ElementRef - 不能从 mat-form-field select mat-select

Angular Directive - ElementRef - Cannot select mat-select from mat-form-field

directive

angular-material

angular