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

通过自定义属性指令和结构指令，我们可以更加灵活地控制模板的展示和行为，提升模板的表达力和可维护性。