1. 组件模板
1.1 数据绑定
数据绑定就是将组件类中的数据显示在组件模板中，当组件类中的数据发生变化时会自动被同步到组件模板中（数据驱动 DOM ）
在 Angular 中使用差值表达式进行数据绑定，即 {{ }} 大胡子语法
<h2>{{ message }}</h2>
<h2>{{ getInfo() }}</h2>
<h2>{{ a == b ? '相等' : '不等' }}</h2>
<h2>{{ 'Hello Angular' }}</h2>
<p [innerHTML]="htmlSnippet"></p> <!-- 对数据中的代码进行转义 -->
1.2 属性绑定
1.2.1 普通属性
属性绑定分为两种情况，绑定 DOM 对象属性和绑定HTML标记属性
-
使用 [属性名称] 为元素绑定
DOM对象属性<img [src]="imgUrl" /> -
使用 [
attr.属性名称] 为元素绑定HTML标记属性<td [attr.colspan]="colSpan"></td>在大多数情况下，
DOM对象属性和HTML标记属性是对应的关系，所以使用第一种情况。但是某些属性只有HTML标记存在，DOM对象中不存在，此时需要使用第二种情况，比如colspan属性，在DOM对象中就没有，或者自定义HTML属性也需要使用第二种情况
1.2.2 class属性
<button class="btn btn-primary" [class.active]="isActive">按钮</button>
<div [ngClass]="{'active': true, 'error': true}"></div>
1.2.3 style 属性
<button [style.backgroundColor]="isActive ? 'blue': 'red'">按钮</button>
<button [ngStyle]="{'backgroundColor': 'red'}">按钮</button>
1.3 事件绑定
<button (click)="onSave($event)">按钮</button>
<!-- 当按下回车键抬起的时候执行函数 -->
<input type="text" (keyup.enter)="onKeyUp()"/>
export class AppComponent {
title = "test"
onSave(event: Event) {
// this 指向组件类的实例对象
console.log(this.title) // "test"
}
}
1.4 使用 模板引用变量获取原生 DOM 对象
1.4.1 在组件模板中获取
<input type="text" (keyup.enter)="onKeyUp(username.value)" #username/>
1.4.2 在组件类中获取
使用 ViewChild 装饰器获取一个元素
<p #paragraph>home works!</p>
import { AfterViewInit, ElementRef, ViewChild } from "@angular/core"
export class HomeComponent implements AfterViewInit {
@ViewChild("paragraph") paragraph: ElementRef<HTMLParagraphElement> | undefined
ngAfterViewInit() {
console.log(this.paragraph?.nativeElement)
}
}
使用 ViewChildren 获取一组元素
<ul>
<li #items>a</li>
<li #items>b</li>
<li #items>c</li>
</ul>
import { AfterViewInit, QueryList, ViewChildren } from "@angular/core"
@Component({
selector: "app-home",
templateUrl: "./home.component.html",
styles: []
})
export class HomeComponent implements AfterViewInit {
@ViewChildren("items") items: QueryList<HTMLLIElement> | undefined
ngAfterViewInit() {
console.log(this.items?.toArray())
}
}
1.5 双向数据绑定
数据在组件类和组件模板中双向同步
Angular 将双向数据绑定功能放在了 @angular/forms 模块中，所以要实现双向数据绑定需要依赖该模块
import { FormsModule } from "@angular/forms"
@NgModule({
imports: [FormsModule],
})
export class AppModule {}
<input type="text" [(ngModel)]="username" />
<button (click)="change()">在组件类中更改 username</button>
<div>username: {{ username }}</div>
export class AppComponent {
username: string = ""
change() {
this.username = "hello Angular"
}
}
1.6 内容投影
<!-- app.component.html -->
<bootstrap-panel>
<div class="heading">Heading</div>
<div class="body">Body</div>
</bootstrap-panel>
<!-- panel.component.html -->
<div class="panel panel-default">
<div class="panel-heading">
<ng-content select=".heading"></ng-content>
</div>
<div class="panel-body">
<ng-content select=".body"></ng-content>
</div>
</div>
如果只有一个ng-content，不需要select属性。
ng-content在浏览器中会被 <div class="heading"></div> 替代，如果不想要这个额外的div，可以使用ng-container替代这个div
<!-- app.component.html -->
<bootstrap-panel>
<ng-container class="heading">Heading</ng-container>
<ng-container class="body">Body</ng-container>
</bootstrap-panel>
1.7 数据绑定容错处理
// app.component.ts
export class AppComponent {
task = {
person: {
name: '张三'
}
}
}
<!-- 方式一 -->
<span *ngIf="task.person">{{ task.person.name }}</span>
<!-- 方式二 -->
<span>{{ task.person?.name }}</span>
1.8 全局样式
/* 第一种方式 在 styles.css 文件中 */
@import "~bootstrap/dist/css/bootstrap.css";
/* ~ 相对node_modules文件夹 */
<!-- 第二种方式 在 index.html 文件中 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
// 第三种方式 在 angular.json 文件中
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
]
