如何以角度訪問 ElementRef.nativeElement 的嵌套元素

Question

我正在使用 NG-ZORRO 庫並想自定義它的DatePicker 。
例如，我想用不同顏色突出顯示一些日子，如下面的屏幕截圖，而我想突出顯示的日子是動態的（基於從數據庫獲取的日期列表）：

我的想法是創建一個指令，將宿主元素與ElementRef綁定，並使用Renderer2將自定義類添加到元素中。 這是我到目前為止所擁有的：

html

<nz-date-picker nzInline customDatePicker></nz-date-picker>

ts

@Directive({
    selector: `[customDatePicker]`
})
export class CustomDatePickerDirective {

    constructor(@Host() @Self() @Optional() public hostDatePicker: NzDatePickerComponent, renderer: Renderer2, hostElement: ElementRef) {
        console.log(this.hostDatePicker);
        renderer.addClass(hostElement.nativeElement, 'custom-color');
    }
}

問題是renderer.addClass只會在頂部元素（ <nz-date-picker>元素）添加自定義類，但我需要注入自定義類的元素在這個元素內，我在想是否有什么辦法我可以查找子/嵌套元素嗎？ 我用 devtools 檢查了<nz-date-picker>元素，我需要添加自定義類的元素在里面很深（在下面屏幕截圖的紅色框內）：

Answer 1

您可以為此使用香草 JS。 這里我只是改變了一些單元格的顏色：

@Directive({
  selector: `[customDatePicker]`,
})
export class CustomDatePickerDirective {
  constructor(private hostElement: ElementRef) {}

  ngAfterViewInit() {
    const datePicker = this.hostElement.nativeElement as HTMLElement;
    const rows = datePicker.querySelectorAll('tr');

    for (let i = 0; i < Object.keys(rows).length; i++) {
      const cells = rows[i].querySelectorAll('td');

      if (i % 2 === 0) continue;

      for (let j = 0; j < Object.keys(cells).length; j++) {
        if (j % 2 === 0) cells[j].style.backgroundColor = 'lightcyan';
      }
    }
  }
}

堆棧閃電戰： https ://stackblitz.com/edit/angular-ivy-wap1jw?file=src/app/custom.directive.ts