Блог

Я пытаюсь с помощью директивы получить доступ к a mat-select внутри a mat-form-field .

 @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>
 

Вы пытаетесь запросить 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"));
    }
}