框架集成：15 Angular模板语法与 - 详细教程与实战指南

<!-- 基本插值 -->
<h1>{{ title }}</h1>
<p>{{ user.name }} - {{ user.email }}</p>

<!-- 表达式 -->
<p>{{ 1 + 1 }}</p>
<p>{{ price * quantity }}</p>
<p>{{ isActive ? '激活' : '未激活' }}</p>
<p>{{ name.toUpperCase() }}</p>
<p>{{ items.length }} 个项目</p>

<!-- 模板字符串 -->
<p>{{ `Hello, ${name}!` }}</p>

<!-- 注意：插值中不能使用 -->
<!-- - new、typeof、instanceof -->
<!-- - 赋值运算符 (=, +=, -=) -->
<!-- - 递增/递减 (++/--) -->
<!-- - 分号 ; -->

<!-- 元素属性绑定 -->
<img [src]="user.avatar" [alt]="user.name" />
<button [disabled]="isSubmitting">提交</button>
<input [value]="defaultValue" />
<a [href]="url" [target]="target">链接</a>

<!-- class绑定 -->
<!-- 对象语法：根据条件添加/移除类 -->
<div [class.active]="isActive" [class.disabled]="isDisabled">
<div [class]="{ active: isActive, disabled: isDisabled }">

<!-- 数组语法 -->
<div [class]="['base', isActive ? 'active' : '']">

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

<!-- 带单位 -->
<div [style.width.%]="100">

<!-- 对象语法 -->
<div [style]="{ color: textColor, fontSize: fontSize + 'px' }">

<!-- 属性绑定 vs 插值 -->
<!-- 以下两种写法等价 -->
<img [src]="imageUrl" />
<img src="{{ imageUrl }}" />

<!-- 属性绑定是推荐方式，更明确 -->

<!-- 基本事件绑定 -->
<button (click)="onClick()">点击</button>
<input (input)="onInput($event)" />
<form (submit)="onSubmit($event)">

<!-- 事件对象 -->
<input (keyup)="onKeyup($event)" />
<!-- $event是DOM事件对象 -->

<!-- 事件传参 -->
<button (click)="selectItem(item)">选择</button>
<button (click)="deleteItem(item.id)">删除</button>

<!-- 模板引用变量获取值 -->
<input #searchInput (keyup)="onSearch(searchInput.value)" />
<button (click)="searchInput.value = ''">清空</button>

<!-- 键盘事件过滤 -->
<input (keyup.enter)="onEnter()" />
<input (keyup.escape)="onEscape()" />

<!-- 阻止默认行为 -->
<form (submit)="onSubmit($event)">
  <!-- 在组件方法中调用 -->
  // onSubmit(event: Event) {
  //   event.preventDefault();
  // }
</form>

<!-- 常用事件 -->
(click)      (dblclick)     (mousedown)    (mouseup)
(mouseenter) (mouseleave)   (keydown)      (keyup)
(input)      (change)       (submit)       (focus)
(blur)       (scroll)       (drag)         (drop)

<!-- ngModel双向绑定（需要FormsModule） -->
<input [(ngModel)]="name" />
<!-- 等价于 -->
<input [ngModel]="name" (ngModelChange)="name = $event" />

<!-- 各种表单控件 -->
<input [(ngModel)]="user.name" />
<textarea [(ngModel)]="user.bio"></textarea>
<select [(ngModel)]="user.level">
  <option value="beginner">初学者</option>
  <option value="intermediate">中级</option>
  <option value="advanced">高级</option>
</select>
<input type="checkbox" [(ngModel)]="user.agree" />
<input type="radio" [(ngModel)]="user.gender" value="male" />

<!-- 自定义双向绑定 -->
<!-- 子组件 -->
@Input() size!: number;
@Output() sizeChange = new EventEmitter<number>();
// 命名约定：属性名 + Change

<!-- 父组件使用 -->
<resizer [(size)]="fontSize"></resizer>

<!-- 内置管道 -->
<p>{{ price | currency:'CNY' }}</p>           <!-- ¥79.90 -->
<p>{{ birthday | date:'yyyy-MM-dd' }}</p>     <!-- 2024-01-15 -->
<p>{{ name | uppercase }}</p>                  <!-- ZHANGSAN -->
<p>{{ name | lowercase }}</p>                  <!-- zhangsan -->
<p>{{ percentage | percent }}</p>              <!-- 85% -->
<p>{{ pi | number:'1.2-2' }}</p>              <!-- 3.14 -->
<p>{{ items | slice:1:3 }}</p>                <!-- 截取第1-2项 -->
<p>{{ data | json }}</p>                       <!-- JSON格式化 -->

<!-- 管道链式调用 -->
<p>{{ birthday | date:'fullDate' | uppercase }}</p>

<!-- 管道传参 -->
<p>{{ amount | currency:'USD':'symbol':'1.2-2' }}</p>

<!-- 自定义管道 -->
@Pipe({ name: 'truncate' })
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit = 20): string {
    return value.length > limit ? value.substring(0, limit) + '...' : value;
  }
}

<!-- 使用自定义管道 -->
<p>{{ longText | truncate:50 }}</p>

<!-- 注意：管道默认是纯管道(pure)，只在输入变化时重新计算 -->
<!-- 非纯管道(impure)每次变更检测都会执行，性能开销大 -->
@Pipe({ name: 'filter', pure: false })  // 谨慎使用!

<!-- 模板引用变量 # -->
<input #phone placeholder="电话号码" />
<button (click)="callPhone(phone.value)">拨打</button>

<!-- 在*ngFor中使用 -->
<li *ngFor="let item of items; index as i; let first = first">
  {{ i }}. {{ item.name }}
  <span *ngIf="first" class="badge">第一个</span>
</li>

<!-- 安全导航操作符 ?. -->
<!-- 防止null/undefined导致的模板错误 -->
<p>{{ user?.name }}</p>           <!-- user为null时不报错 -->
<p>{{ user?.address?.city }}</p>  <!-- 多层安全导航 -->
<p>{{ items?.[0]?.name }}</p>     <!-- 数组安全访问 -->

<!-- 非空断言操作符 ! -->
<!-- 告诉TypeScript该值不为null -->
<p>{{ user!.name }}</p>  <!-- 确定user不为null时使用 -->

<!-- $any()类型转换 -->
<!-- 禁用模板类型检查 -->
<p>{{ $any(user).customProperty }}</p>

<!-- 不推荐：模板中复杂逻辑 -->
<p>{{ items.filter(i => i.active).sort((a,b) => a.id - b.id).map(i => i.name).join(', ') }}</p>

<!-- 推荐：组件中处理 -->
<p>{{ activeItemNames }}</p>
// 组件中
get activeItemNames(): string {
  return this.items.filter(i => i.active).sort((a,b) => a.id - b.id).map(i => i.name).join(', ');
}

<!-- 不推荐：直接访问可能为null的属性 -->
<p>{{ user.address.city }}</p>  <!-- 可能报错 -->

<!-- 推荐：使用安全导航 -->
<p>{{ user?.address?.city }}</p>

<!-- 不推荐：内联长样式绑定 -->
<div [style]="{ color: textColor, fontSize: fontSize + 'px', padding: padding + 'px', backgroundColor: bgColor }">

<!-- 推荐：使用ngStyle或组件属性 -->
<div [ngStyle]="containerStyle">