在Angular中怎樣使用自定義屬性和結構指令提升模板的表達力

Angular中可以通過自定義屬性指令和結構指令來提升模板的表達力。自定義屬性指令允許我們在標簽上添加自定義屬性，從而改變元素的行為或樣式。而結構指令則允許我們根據條件或循環來動態地展示或隱藏模板內容。

下面是一個簡單的例子，演示如何使用自定義屬性指令和結構指令：

1. 自定義屬性指令：

假設我們有一個自定義屬性指令highlight，用于在鼠標懸停在元素上時高亮顯示該元素。我們可以在指令中使用Renderer2服務來修改元素樣式。

import { Directive, ElementRef, HostListener, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'yellow');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.renderer.setStyle(this.el.nativeElement, 'background-color', 'white');
  }

}

然后我們可以在模板中使用這個指令：

<div appHighlight>Hover over me!</div>

2. 結構指令：

假設我們有一個簡單的結構指令，用于根據條件來展示或隱藏某個元素。我們可以通過ng-template和ngIf指令來實現這個功能。

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appShowIf]'
})
export class ShowIfDirective {

  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) { }

  @Input() set appShowIf(condition: boolean) {
    if (condition) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

}

然后我們可以在模板中使用這個結構指令：

<div *appShowIf="isDisplayed">
  This will only be shown if isDisplayed is true.
</div>

通過自定義屬性指令和結構指令，我們可以更加靈活地控制模板的展示和行為，提升模板的表達力和可維護性。