组件与模板

Angular 组件由 TypeScript 类、模板与样式组成，通过 @Component 装饰器配置。见 Angular 基础。

组件定义

import { Component, input, output, signal } from "@angular/core";

@Component({
  selector: "app-counter",
  standalone: true,
  template: `
    <button type="button" (click)="increment()">{{ count() }}</button>
  `,
})
export class CounterComponent {
  /** 父组件可绑定：[initial]="5" */
  initial = input(0);
  changed = output<number>();

  count = signal(0);

  increment() {
    this.count.update((c) => c + 1);
    this.changed.emit(this.count());
  }
}

上例使用 Signal 与 input/output API（Angular 17.1+ 推荐）；signal 需从 @angular/core 导入。

数据绑定

语法	方向	示例
`{{ expr }}`	插值	`{{ title }}`
`[property]="expr"`	属性绑定	`[disabled]="isBusy"`
`(event)="handler()"`	事件绑定	`(click)="save()"`
`[(ngModel)]`	双向（须导入 `FormsModule`）	见表单
`[class.foo]` / `[style.width.px]`	类与样式	按表达式切换

内置控制流（Angular 17+）

推荐使用新语法（编译期优化，无需 CommonModule 中的 *ngIf 等结构指令即可使用控制流块）：

html

@if (user(); as u) {
  <p>{{ u.name }}</p>
} @else {
  <p>未登录</p>
}

@for (item of items(); track item.id) {
  <li>{{ item.label }}</li>
} @empty {
  <li>暂无数据</li>
}

@switch (status()) {
  @case ('ok') { <span>成功</span> }
  @default { <span>未知</span> }
}

track 表达式用于列表 diff，规则类似 React/Vue 的 稳定 key。

指令与管道

结构型指令（旧）：*ngIf、*ngFor 仍可用，新项目优先 @if / @for。
属性型指令：如 NgClass、NgStyle（@angular/common）。
管道：模板内转换显示，如 {{ date \| date:'short' }}；纯管道利于变更检测。

内容投影

html

<!-- 父模板 -->
<app-card>
  <h2 card-title>标题</h2>
  <p>正文</p>
</app-card>

html

<!-- app-card 模板 -->
<ng-content select="[card-title]" />
<ng-content />

与 Vue / React 对照（简表）

	Angular	Vue 3	React
模板	HTML + 指令	SFC template	JSX
输入	`input()` / `@Input`	`defineProps`	`props`
输出	`output()` / `@Output`	`defineEmits`	回调 props

参考文献

以下链接在编写时均可正常访问：

资料	说明
组件概览	官方
模板语法	绑定与控制流
组件输入输出	input/output