第五章：Directive —— 园区规章贴片，给楼和设备附加行为规则

在 Angular 里，Directive 最适合理解成贴在园区设备和门禁上的规章贴片。

它不一定自己长成一栋楼，但它能改变：

元素的行为
元素的样式
元素的可见性
元素如何被重复展开

你可以先记住一句非常关键的话：

Component 本质上也是一种 Directive，只不过它额外带了模板。

#1. 属性型指令：给设备加行为

import { Directive, ElementRef, Input, OnChanges, inject } from '@angular/core';

@Directive({
  selector: '[appOnlineBadge]',
  standalone: true,
})
export class OnlineBadgeDirective implements OnChanges {
  private el = inject(ElementRef<HTMLElement>);

  @Input('appOnlineBadge') online = false;

  ngOnChanges() {
    this.el.nativeElement.style.borderLeft =
      this.online ? '4px solid #118a44' : '4px solid #999';
  }
}

使用时：

html

<li [appOnlineBadge]="device.online">
  {{ device.name }}
</li>

它就像给一扇门贴上“在线/离线”的管理标记。

#2. 结构型指令：决定这一块区域要不要存在

传统 Angular 里最经典的是：

html

<p *ngIf="isOpen">园区开放中</p>
<li *ngFor="let item of departments">{{ item.name }}</li>

现代 Angular 也支持块级控制流：

html

@if (isOpen) {
  <p>园区开放中</p>
}

@for (item of departments; track item.id) {
  <li>{{ item.name }}</li>
}

无论是旧语法还是新块语法，背后心智都一样：

text

Directive / 模板控制流
= 不是“画出来以后再改”
= 而是在渲染阶段就决定“这里该不该出现、出现几份”