typescript - วิธีเข้าถึงองค์ประกอบที่ซ้อนอยู่ของ ElementRef.nativeElement ใน Angular

ฉันกำลังใช้ไลบรารี NG-ZORRO และต้องการปรับแต่ง DatePicker ของมัน
ตัวอย่างเช่น ฉันต้องการเน้นวันที่บางวันด้วยสีที่แตกต่างกันตามภาพหน้าจอด้านล่าง และวันที่ที่ฉันต้องการเน้นเป็นแบบไดนามิก (ขึ้นอยู่กับรายการวันที่ที่ดึงมาจากฐานข้อมูล):

ไอเดียของผมคือสร้าง directive ผูกองค์ประกอบโฮสต์ด้วย 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>) แต่ตัวองค์ประกอบที่ฉันต้องการเพิ่มคลาสกำหนดเองอยู่ภายในองค์ประกอบนี้ ฉันกำลังคิดว่ามีวิธีใดที่ฉันสามารถค้นหาองค์ประกอบลูก/องค์ประกอบซ้อนกันได้หรือไม่? ฉันตรวจสอบ <nz-date-picker> ด้วย devtools องค์ประกอบที่ฉันต้องการเพิ่มคลาสกำหนดเองนั้นอยู่ลึกภายในมาก (อยู่ภายในกรอบสีแดงตามภาพด้านล่าง):

คำตอบ #1

คุณสามารถใช้ JS ธรรมดาสำหรับสิ่งนี้ได้ คุณสามารถใช้แอตทริบิวต์ title เพื่อเลือกเซลล์ได้อย่างง่ายดาย:

@Directive({
  selector: `[customDatePicker]`,
})
export class CustomDatePickerDirective {
  @Input() highlights: {day: string, color: string}[] = [];
  constructor(private hostElement: ElementRef) {};

  ngAfterViewInit() {
    const datePicker = this.hostElement.nativeElement as HTMLElement;
    for (const h of this.highlights) {
      const cell = datePicker.querySelector<HTMLElement>(`[title='${h.day}']`);
      cell.style.backgroundColor = h.color;
    }
  }
}

<nz-date-picker nzInline customDatePicker [highlights]="highlights"></nz-date-picker>

export class AppComponent {
  highlights = [
    { day: '7/8/2022', color: 'red' },
    { day: '7/18/2022', color: 'green' },
  ];
}

แน่นอนว่าคุณสามารถตั้งค่าคลาสแทนที่จะใช้แค่สีได้ รูปแบบคือ cell.classList.add('className').

stackblitz: https://stackblitz.com/edit/angular-ivy-wap1jw?file=src/app/custom.directive.ts