1. 插值表达式（Interpolation）： 使用双花括号 {{ }} 可以在模板中插入组件类中的属性值。
// 组件类
export class AppComponent {
message = 'Hello, Angular!';
}
<!-- 模板 -->
<p>{{ message }}</p>
2. 属性绑定（Property Binding）： 使用方括号 [] 可以将组件类中的属性值绑定到 HTML 元素的属性上。
// 组件类
export class AppComponent {
imageUrl = 'path/to/image.jpg';
}
<!-- 模板 -->
<img [src]="imageUrl" alt="Angular Image">
3. 事件绑定（Event Binding）： 使用小括号 () 可以将组件类中的方法绑定到 HTML 元素的事件上。
// 组件类
export class AppComponent {
handleClick() {
console.log('Button clicked!');
}
}
<!-- 模板 -->
<button (click)="handleClick()">Click me</button>
4. 双向绑定（Two-Way Binding）： 使用 [(ngModel)] 可以实现双向绑定，将输入框的值同步到组件类中的属性。
// 组件类
export class AppComponent {
inputValue = '';
}
<!-- 模板 -->
<input [(ngModel)]="inputValue" placeholder="Enter text">
需要在模块中导入 FormsModule 并在 imports 数组中声明以使用双向绑定。
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
FormsModule
],
// ...
})
5. 结构指令（Structural Directives）： Angular 提供了一些特殊的指令，称为结构指令，它们以星号 * 开头。常见的结构指令包括 *ngIf 和 *ngFor。
// 组件类
export class AppComponent {
items = [1, 2, 3, 4, 5];
condition = true;
}
<!-- 模板 -->
<div *ngIf="condition">
<p>Content shown if condition is true</p>
</div>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
这些基本的模板概念使你能够创建动态、交互式的用户界面，结合 Angular 的组件和服务，可以构建复杂的单页面应用程序（SPA）。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4918/Angular