框架集成：16 Angular指令与HT - 详细教程与实战指南

<!-- *ngIf 条件渲染 -->
<div *ngIf="isLoggedIn; else loginTemplate">
  欢迎回来，{{ userName }}！
</div>
<ng-template #loginTemplate>
  请先登录
</ng-template>

<!-- *ngFor 列表渲染 -->
<li *ngFor="let item of items; index as i; trackBy: trackByFn">
  {{ i + 1 }}. {{ item.name }}
</li>

<!-- *ngFor 上下文变量 -->
<li *ngFor="let item of items;
            index as i;        // 索引
            first as isFirst;  // 是否第一个
            last as isLast;    // 是否最后一个
            even as isEven;    // 是否偶数
            odd as isOdd">     // 是否奇数
  {{ item.name }}
</li>

<!-- trackBy优化性能 -->
trackByFn(index: number, item: Item): number {
  return item.id;  // 使用唯一id追踪
}

<!-- *ngSwitch 条件切换 -->
<div [ngSwitch]="status">
  <p *ngSwitchCase="'loading'">加载中...</p>
  <p *ngSwitchCase="'error'">出错了</p>
  <p *ngSwitchCase="'success'">加载成功</p>
  <p *ngSwitchDefault>未知状态</p>
</div>

<!-- ngClass：动态类绑定 -->
<!-- 对象语法（推荐） -->
<div [ngClass]="{
  'active': isActive,
  'disabled': isDisabled,
  'highlight': isHighlighted
}">

<!-- 数组语法 -->
<div [ngClass]="['base-class', sizeClass]">

<!-- 字符串语法 -->
<div [ngClass]="'active disabled'">

<!-- ngStyle：动态样式绑定 -->
<!-- 对象语法 -->
<div [ngStyle]="{
  'color': textColor,
  'font-size': fontSize + 'px',
  'background-color': bgColor,
  'border-radius': radius + 'px'
}">

<!-- 单个样式 -->
<div [style.color]="textColor">
<div [style.font-size.px]="fontSize">
<div [style.width.%]="100">

// highlight.directive.ts - 高亮指令
import { Directive, ElementRef, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appHighlight]',  // 使用方式: <p appHighlight>
  // 或带参数: <p appHighlight="#ff0000">
})
export class HighlightDirective implements OnInit {
  @Input() appHighlight = '';  // 输入属性名与选择器同名

  constructor(private el: ElementRef) {}

  ngOnInit() {
    this.el.nativeElement.style.backgroundColor =
      this.appHighlight || '#ffff00';
  }
}

// 使用
<p appHighlight>默认高亮（黄色）</p>
<p appHighlight="#ff0000">红色高亮</p>

// 响应式高亮指令
@Directive({
  selector: '[appHoverHighlight]'
})
export class HoverHighlightDirective {
  @Input() appHoverHighlight = '#ffff00';

  constructor(private el: ElementRef) {}

  @HostListener('mouseenter') onMouseEnter() {
    this.el.nativeElement.style.backgroundColor = this.appHoverHighlight;
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.el.nativeElement.style.backgroundColor = '';
  }
}

// 使用
<p appHoverHighlight="#e0f0ff">鼠标悬停变蓝</p>

// unless.directive.ts - 反向ngIf
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[appUnless]'
})
export class UnlessDirective {
  private hasView = false;

  @Input() set appUnless(condition: boolean) {
    if (!condition && !this.hasView) {
      this.viewContainer.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (condition && this.hasView) {
      this.viewContainer.clear();
      this.hasView = false;
    }
  }

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

// 使用
<p *appUnless="isLoggedIn">请先登录</p>
<!-- isLoggedIn为false时显示 -->

<!-- ng-template: 定义模板（不直接渲染） -->
<ng-template #loading>
  <p>加载中...</p>
</ng-template>

<!-- 使用ngTemplateOutlet渲染 -->
<ng-container *ngTemplateOutlet="loading"></ng-container>

<!-- 带上下文数据 -->
<ng-template #greet let-name="personName">
  <p>Hello, {{ name }}!</p>
</ng-template>

<ng-container *ngTemplateOutlet="greet;
  context: { personName: 'Angular' }">
</ng-container>

<!-- ng-container: 逻辑容器（不产生DOM元素） -->
<!-- 解决结构指令不能同用的问题 -->
<div *ngFor="let item of items">
  <ng-container *ngIf="item.active">
    <p>{{ item.name }}</p>
  </ng-container>
</div>

<!-- ng-container用于分组 -->
<ng-container *ngIf="showSection">
  <h3>标题</h3>
  <p>内容</p>
  <button>操作</button>
</ng-container>
<!-- 不会产生额外的包裹元素 -->