angular

src/ClientApp/WebApp/
  ├── main.ts                    # 应用入口
  ├── app/
  │   ├── app.config.ts          # 应用配置
  │   ├── app.routes.ts          # 路由配置
  │   ├── layout/                # 布局容器
  │   ├── pages/                 # 页面组件
  │   ├── share/
  │   │   ├── components/        # 共享组件
  │   │   ├── pipe/              # 管道
  │   │   ├── auth.guard.ts      # 路由守卫
  │   │   ├── custom-paginator-intl.ts
  │   │   └── i18n-keys.ts       # i18n 键定义
  │   └── services/              # 服务和 API 客户端
  ├── assets/
  │   └── i18n/*.json            # 多语言文件
  ├── environments/              # 环境配置
  ├── styles/
  │   ├── styles.scss            # 全局样式
  │   ├── theme.scss             # Material 主题
  │   └── vars.scss              # CSS 变量
  └── proxy.conf.json            # 开发代理配置

cd src/ClientApp/WebApp
npm run build

npm run start  # 启动开发服务器，实时查看编译错误

import { FormControl, FormGroup } from '@angular/forms';

userForm = new FormGroup({
  name: new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.required, Validators.email])
});

// 类型安全
get nameControl() {
  return this.userForm.get('name') as FormControl;
}

<!-- ✅ 推荐：使用 [formControl] + getter，避免字符串硬编码 -->
<form [formGroup]="form">
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput [formControl]="name" />
    @if (name.errors) {
      <mat-error>{{ getValidatorMessage(name) }}</mat-error>
    }
  </mat-form-field>
</form>

<!-- ❌ 避免：formControlName 使用字符串硬编码 -->
<form [formGroup]="form">
  <input matInput formControlName="name" />
</form>

export class UserForm {
  form = this.fb.group({
    name: ['', [Validators.required, Validators.maxLength(100)]],
    email: ['', [Validators.required, Validators.email]]
  });

  // ✅ 通过 getter 访问控件，避免字符串，便于复用和重构
  get name() { return this.form.get('name') as FormControl; }
  get email() { return this.form.get('email') as FormControl; }

  getValidatorMessage(control: AbstractControl | null): string {
    if (!control || !control.errors) { return ''; }
    const errors = control.errors;
    const key = Object.keys(errors)[0];
    const params = errors[key];
    return this.translate.instant(`validation.${key.toLowerCase()}`, params);
  }
}

{
  "/api": {
    "target": "http://localhost:5000",
    "secure": false,
    "changeOrigin": true
  }
}

export const routes: Routes = [
  {
    path: 'users',
    loadComponent: () => 
      import('./pages/user/user-list.component')
        .then(m => m.UserListComponent),
    canActivate: [authGuard]
  }
];

{
  "common": {
    "save": "保存",
    "cancel": "取消",
    "delete": "删除"
  },
  "user": {
    "list": "用户列表",
    "detail": "用户详情"
  }
}

<button>{{ 'common.save' | translate }}</button>

<!-- ❌ 旧语法 - 禁止使用 -->
<div *ngIf="isLoading">Loading...</div>
<div *ngFor="let item of items">{{ item }}</div>

<!-- ✓ 新语法 - 必须使用 -->
@if (isLoading) {
  <div>Loading</div>
} @else {
  <div>Content</div>
}

@for (item of items; track item.id) {
  <div>{{ item.name }}</div>
}

@switch (status) {
  @case ('active') { <span>Active</span> }
  @case ('pending') { <span>Pending</span> }
  @default { <span>Unknown</span> }
}

<!-- 属性绑定 -->
<button [disabled]="isLoading">Submit</button>
<img [src]="imageUrl" [alt]="description" />

<!-- 插值表达式 -->
<h1>{{ title }}</h1>

<!-- 事件绑定 -->
<button (click)="handleClick()">Click</button>

<!-- 日期和翻译管道 -->
<span>{{ createdTime | date: 'short' }}</span>
<h2>{{ i18nKeys.common.title | translate }}</h2>

<!-- title 属性中使用管道 -->
<button [title]="i18nKeys.common.view | translate">
  <mat-icon>visibility</mat-icon>
</button>