Angular指令使用指南

<!-- 基本用法 -->
<div *ngIf="isLoggedIn">
  欢迎回来！
</div>

<!-- 配合else使用 -->
<div *ngIf="user; else noUser">
  欢迎, {{ user.name }}!
</div>

<ng-template #noUser>
  请先登录
</ng-template>

<!-- 配合then/else -->
<div *ngIf="isLoading; then loading; else content"></div>

<ng-template #loading>
  <div class="spinner">加载中...</div>
</ng-template>

<ng-template #content>
  <div>内容区域</div>
</ng-template>

<!-- 基本用法 -->
<ul>
  <li *ngFor="let item of items">
    {{ item }}
  </li>
</ul>

<!-- 获取索引和其他变量 -->
<div *ngFor="let user of users;
            let i = index;
            let isFirst = first;
            let isLast = last;
            let isEven = even;
            let isOdd = odd">
  {{ i + 1 }}. {{ user.name }}
</div>

<!-- 配合trackBy提高性能 -->
<div *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</div>

<!-- 基本用法 -->
<div [ngSwitch]="status">
  <div *ngSwitchCase="'success'">操作成功</div>
  <div *ngSwitchCase="'error'">操作失败</div>
  <div *ngSwitchCase="'loading'">加载中...</div>
  <div *ngSwitchDefault>未知状态</div>
</div>

<!-- 配合枚举使用 -->
<div [ngSwitch]="user.role">
  <div *ngSwitchCase="Role.Admin">管理员</div>
  <div *ngSwitchCase="Role.User">普通用户</div>
  <div *ngSwitchCase="Role.Guest">访客</div>
</div>

<!-- 根据条件添加类 -->
<div [ngClass]="{ 'active': isActive,
                   'error': hasError,
                   'disabled': isDisabled }">
  内容
</div>

<!-- 使用字符串数组 -->
<div [ngClass]="['card', 'highlight', theme]">
  卡片内容
</div>

<!-- 使用组件方法 -->
<button [ngClass]="getButtonClasses()">
  点击我
</button>

<!-- 配合对象语法 -->
<div [ngClass]="classObject"></div>

<!-- 根据条件设置样式 -->
<div [ngStyle]="{ 'color': textColor,
                   'font-size': fontSize + 'px',
                   'background-color': bgColor }">
  内容
</div>

<!-- 使用组件属性 -->
<div [ngStyle]="customStyles">
  自定义样式
</div>

<!-- 计算样式 -->
<div [ngStyle]="{
  'width': width + 'px',
  'height': height + 'px',
  'opacity': isVisible ? 1 : 0.5
}">
  动态元素
</div>

<!-- 单个样式绑定 -->
<div [style.width]="containerWidth"
     [style.height.px]="100">
  固定高度
</div>

<!-- 基本用法 -->
<input [(ngModel)]="userName"
       placeholder="请输入姓名">

<!-- 配合事件监听 -->
<input [(ngModel)]="email"
       (ngModelChange)="onEmailChange($event)">

<!-- 下拉选择框 -->
<select [(ngModel)]="selectedOption">
  <option *ngFor="let option of options"
          [value]="option.value">
    {{ option.label }}
  </option>
</select>

<!-- 复选框 -->
<input type="checkbox"
       [(ngModel)]="isAgreed"> 我同意

<!-- 单选按钮组 -->
<input type="radio"
       [(ngModel)]="gender"
       value="male"> 男
<input type="radio"
       [(ngModel)]="gender"
       value="female"> 女

// 支持多个输入别名
@Directive({ selector: '[appAdvanced]' })
export class AdvancedDirective {
  @Input('appAdvanced') mainValue: string = '';
  @Input() config: any;
  @Input() disabled: boolean = false;

  @Output() valueChange = new EventEmitter<string>();
  @Output() activated = new EventEmitter<boolean>();

  private internalValue: string = '';

  @Input()
  set value(val: string) {
    this.internalValue = val;
    this.valueChange.emit(val);
  }

  get value(): string {
    return this.internalValue;
  }
}

@Directive({ selector: '[appEventTracker]' })
export class EventTrackerDirective {
  @HostListener('click', ['$event'])
  onClick(event: MouseEvent): void {
    console.log('点击事件:', event);
    event.preventDefault();
  }

  @HostListener('mouseenter')
  onMouseEnter(): void {
    console.log('鼠标进入');
  }

  @HostListener('mouseleave')
  onMouseLeave(): void {
    console.log('鼠标离开');
  }

  @HostListener('window:resize', ['$event'])
  onWindowResize(event: Event): void {
    console.log('窗口大小改变:', event);
  }

  @HostListener('document:keydown.escape', ['$event'])
  onEscapeKey(event: KeyboardEvent): void {
    console.log('Escape键被按下');
  }
}

@Directive({ selector: '[appStyleManager]' })
export class StyleManagerDirective {
  @HostBinding('class.active')
  isActive: boolean = false;

  @HostBinding('style.backgroundColor')
  bgColor: string = 'transparent';

  @HostBinding('attr.role')
  role: string = 'button';

  @HostBinding('attr.aria-disabled')
  get ariaDisabled(): string {
    return this.isActive ? 'false' : 'true';
  }

  @HostBinding('style.width.px')
  width: number = 100;

  @HostBinding('class')
  get elementClasses(): string {
    return this.isActive ? 'btn btn-primary' : 'btn btn-secondary';
  }
}