angular官网实例（综合）

第一部分：

　　（应用的“外壳”）

1、新建项目：

•  ng new mytest 

2、进入项目目录，并启动这个应用。

• cd mytest
• ng serve --open

3、添加一个标题

• 打开 app.component.ts            title = 'Tour of Heroes';
• 打开 app.component.html        <h1>{{title}}</h1> 

 

 

第二部分：

 （英雄编辑器）

 1、创建组件 myHeros

•  ng generate component myHeroes 

2、在 myHeroes.component.ts 中定义数组

3、在 myHeroes.component.html中使用并绑定数组的值，通过 ([ngModel]) 绑定input可修改值

  

 

 

• 补充：

我这里省略了angular官网上的把一个步骤：创建一个类 ，下面简单补充一下创建和使用这个类：

• • 创建 Hero 类：在 src/app 文件夹中为 Hero 类创建一个文件（hero.ts），并添加 id 和 name 属性。 export class Hero { id: number; name: string; }
  • 在要使用到 Hero 类的组件里要 import 这个 hero.ts ，比如在 myHeroes.component.ts 中；             import { HeroService } from '../hero.service';
  • 使用 Hero 类：hero: Hero = { id: 1, name: 'Windstorm' };

 

 

第三部分：

（显示英雄列表）

1、定义一个数组 heros ，通过 *ngFor 循环，在<li>标签上展示出单个 hero 的属性

2、在<li>标签上添加 click 事件绑定，通过点击这个事件在下面展示出被点击的这一项

3、添加 click 事件处理器，在这里给 selectedHero 赋值

•  selectedHero: any; 
•  onSelect(item){ this.selectedHero = item; } 

3、使用 *ngIf 隐藏空白的详情

• 把要显示的hero详情的 HTML 包裹在一个 <div> 中， 并且为这个 div 添加 Angular 的 *ngIf 指令，把它的值设置为 selectedHero。（初始化没有，点击之后才有）
• 当 selectedHero 为 undefined 时，ngIf 从 DOM 中移除了英雄详情
• 当用户选择一个英雄时，selectedHero 也就有了值，并且 ngIf 把英雄的详情放回到 DOM 中。

4、给所选英雄添加样式

• 所选英雄的颜色来自于CSS 样式中的类 .selected
• 如果当前行的英雄和 selectedHero 相同，Angular 就会添加 CSS 类 selected，否则就会移除它。

 

 

 

第四部分：

（ 主从组件）

• 在上一节中，MyHeroesComponent 同时显示了 "英雄列表" 和 "所选英雄的详情" 两部分内容。现在要把 "英雄详情" 移入一个独立的、可复用的 HeroDetailComponent组件中；

1、新建一个名叫 hero-detail 的新组件 ng g component hero-detail 

2、从 HeroesComponent 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 HeroDetailComponent 模板中

3、所粘贴的 HTML 引用了 selectedHero。 但是，新的 HeroDetailComponent 可以展示任意英雄，而不仅仅所选的。因此还要把模板中的所有 selectedHero 替换为 item。

 

•  在你从模板中剪切走代码之前，它自己负责显示英雄的详情。现在它要把这个职责委托给 HeroDetailComponent 了。讲 "英雄详情" 移入子组件之后，添加 @Input() item 属性

1、在myHeros.component.html 中添加 HeroDetail的占位符：  <app-hero-detail [item]="selectedHero"></app-hero-detail> 

2、在heros.detail.component.ts 中添加个带有 @Input() 装饰器的 item属性，这个组件所做的只是通过 hero 属性接收一个英雄对象，并显示它。 @Input() item; 

 

• 注：（1） [item]="selectedHero"  是属性绑定的语法，是父子组件之间通讯的重要途径；

  （2）组件通讯有两种方式：父到子（用@Input装饰器）  、  子到父（用@Output装饰器）       

    语法：   @Input() name: number; 

  

 

 

• 有哪些变化？

• 像第三部分一样，一旦用户点击了一个英雄的名字，该英雄的详情就显示在了英雄列表下方。 现在，HeroDetailComponent 负责显示那些详情，而不再是 HeroesComponent。