指令

指令 扩展 HTML 行为：结构型（*ngIf、*ngFor）改 DOM 树，属性型（[class]、[style]）改元素属性。Angular 17+ 另提供 @if / @for 控制流，语法更贴近 Vue 3 核心 模板。

学习目标

• 使用 @if / @for 与经典 *ngDirectives
• 掌握属性绑定、ngClass、ngStyle
• 理解 Standalone 组件的 imports 声明

核心内容

控制流（推荐）

@Component({
  selector: "app-lesson-list",
  standalone: true,
  template: `
    @if (loading) {
      <p>加载中…</p>
    } @else if (error) {
      <p class="error">{{ error }}</p>
    } @else {
      <ul>
        @for (lesson of lessons; track lesson.slug) {
          <li [class.done]="lesson.completed">{{ lesson.title }}</li>
        } @empty {
          <li>暂无课时</li>
        }
      </ul>
    }
  `,
})
export class LessonListComponent {
  loading = false;
  error: string | null = null;
  lessons = [{ slug: "ng-intro", title: "Angular 是什么", completed: true }];
}

经典指令（存量代码常见）

<ul>
  <li *ngFor="let t of tracks; trackBy: trackBySlug">{{ t.title }}</li>
</ul>
<div *ngIf="user; else guest">欢迎，{{ user.name }}</div>
<ng-template #guest><p>请登录</p></ng-template>

使用 *ngFor / *ngIf 时，Standalone 组件需在 imports 加入 CommonModule。

属性绑定

<button [disabled]="!formValid" [class.active]="isActive">提交</button>
<img [attr.alt]="trackTitle" [style.width.px]="120" />

Angular	Vue	React
@if / *ngIf	v-if	{cond && <…>}
@for / *ngFor	v-for	.map()
[class.x]	:class	className

企业项目常混用新旧语法；读代码时两种都要认。类型标注配合 TypeScript 核心。

练习

• 用 @for 渲染 track 列表，加 @empty 占位
• 用 [ngClass] 切换「已完成 / 进行中」样式

小结

指令 = 结构 + 属性扩展；优先学 @if/@for。 下一课服务与依赖注入。