Angular CLI 创建一个名为 heroes 的新组件。
ng generate component heroes
@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。
CLI 自动生成了三个元数据属性：
1. selector— 组件的选择器（CSS 元素选择器）
2. templateUrl— 组件模板文件的位置。
3. styleUrls— 组件私有 CSS 样式表文件的位置。
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
// ngOnInit() 是一个生命周期钩子，
// Angular 在创建完组件后很快就会调用 ngOnInit()。这里是放置初始化逻辑的好地方。
export class HeroesComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
添加 hero 属性
heroes.component.ts (hero property)
content_copyhero = 'Windstorm';
创建 Hero 类
export interface Hero { id: number; name: string; }
使用 UppercasePipe 进行格式化
<h2>{{hero.name | uppercase}} Details</h2>
绑定表达式中的 uppercase 位于管道操作符（ | ）的右边，用来调用内置管道 UppercasePipe。
管道 是格式化字符串、金额、日期和其它显示数据的好办法。 Angular 发布了一些内置管道，而且你还可以创建自己的管道。
编辑英雄名字
AppModule
导入 FormsModule
打开 AppModule (app.module.ts) 并从 @angular/forms 库中导入 FormsModule 符号。
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
然后把 FormsModule 添加到 @NgModule 元数据的 imports 数组中，这里是该应用所需外部模块的列表。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';// <-- NgModel lives here
@NgModule({
declarations: [
AppComponent,
HeroesComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
小结
• 你使用 CLI 创建了第二个组件 HeroesComponent。
• 你把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。
• 你使用 UppercasePipe 来格式化英雄的名字。
• 你用 ngModel 指令实现了双向数据绑定。
• 你知道了 AppModule。
• 你把 FormsModule 导入了 AppModule，以便 Angular 能识别并应用 ngModel 指令。
• 你知道了把组件声明到 AppModule 是很重要的，并认识到 CLI 会自动帮你声明它。
显示这些英雄
使用 *ngFor 列出这些英雄
打开 HeroesComponent 的模板文件，并做如下修改：
• 在顶部添加 <h2>，
• 然后添加表示无序列表的 HTML 元素（<ul>）
• 在 <ul> 中插入一个 <li> 元素，以显示单个 hero 的属性。
• 点缀上一些 CSS 类（稍后你还会添加更多 CSS 样式）。
做完之后应该是这样的：
<li *ngFor="let hero of heroes">
*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。
这个例子中涉及的语法如下：
• <li> 就是 *ngFor 的宿主元素。
• heroes 就是来自 HeroesComponent 类的列表。
• 当依次遍历这个列表时，hero 会为每个迭代保存当前的英雄对象。
不要忘了 ngFor 前面的星号（*），它是该语法中的关键部分。
主从结构
当用户在主列表中点击一个英雄时，该组件应该在页面底部显示所选英雄的详情。
在本节，你将监听英雄条目的点击事件，并更新英雄的详情。
添加 click 事件绑定
再往 <li> 元素上插入一句点击事件的绑定代码：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
这是 Angular 事件绑定 语法的例子。
click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)。
下一部分，会在 HeroesComponent 上定义一个 onSelect() 方法，用来显示 *ngFor 表达式所定义的那个英雄（hero）。
小结
• 英雄指南应用在一个主从视图中显示了英雄列表。
• 用户可以选择一个英雄，并查看该英雄的详情。
• 你使用 *ngFor 显示了一个列表。
• 你使用 *ngIf 来根据条件包含或排除了一段 HTML。
• 你可以用 class 绑定来切换 CSS 的样式类。
3制作 HeroDetailComponent
使用 Angular CLI 生成一个名叫 hero-detail 的新组件。
ng generate component hero-detail
添加 @Input() hero 属性
HeroDetailComponent 模板中绑定了组件中的 hero 属性，它的类型是 Hero。
打开 HeroDetailComponent 类文件，并导入 Hero 符号。
小结
• 你创建了一个独立的、可复用的 HeroDetailComponent 组件。
• 你用属性绑定语法来让父组件 HeroesComponent 可以控制子组件 HeroDetailComponent。
• 你用 @Input 装饰器来让 hero 属性可以在外部的 HeroesComponent 中绑定。
网友评论