Angular 入门 - 英雄之旅教程（坑）教程：英雄之旅参考资料: angular 官网教程 https://ang

教程：英雄之旅

参考资料: angular 官网教程 angular.cn/tutorial/to…
GitHub 练习地址 github.com/ST2020wa/an…
学习笔记，非原创内容

创建项目

搭建开发环境

使用 CLI 命令的ng new，创建名为 angular-tour-of-heroes 的应用。

ng new angular-tour-of-heroes

启动应用服务器

进入终端启用这个应用，通过 ng serve 命令构建本应用、启动开发服务器、监听源文件，并且在文件发生变化时重新构建本应用。如果连着 --open 使用，会打开浏览器并访问 http://localhost:4200/

cd angular-tour-of-heroes
ng serve --open

打开 localhost:4200 端口的浏览器，显示的就是这个应用的外壳，一个叫做 AppComponent 的 Angular 组件外壳。
组件是 Angular 应用中的基本构造块，它们在屏幕上显示数据，监听用户输入，并且根据这些输入执行相应的动作。

修改应用标题

用编辑器打开这个项目，可以看到 src/app 目录中的 AppComponent 壳的三个实现文件：

app.component.ts 组件类代码
app.component.html 组件模版
app.component.css 组件私有样式

更改应用标题

在 app.component.ts 中,修改 title 属性的值

title = 'Tour of Heroes';

在 app.component.html 中写入

<h1>{{title}}</h1>

双花括号语法 {{ }} 是 Angular 的插值绑定语法。插值绑定，就是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。当浏览器自动刷新后，这里就会显示出新的应用标题。
可以修改 css 文件添加一些样式给这个组件～

英雄编辑器

创建英雄列表组件

创建新组件

ng generate component heroes

生成的类文件(.ts)如下

import { Component, OnInit } from '@angular/core';

//  装饰器函数，用于为该组件指定 Angular 所需的元数据
@Component({ 
  //  组件的选择器，用于在父组件的模板中匹配 HTML 元素的名称，以识别出该组件
  selector: 'app-heroes',
  //  组件模版文件的位置
  templateUrl: './heroes.component.html',
  //  组件私有样式表文件的位置
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  //  生命周期钩子，Angular 在创建完组件后会很快调用 ngOnInit()，适合放置初始化的逻辑
  ngOnInit() {
  }

}

添加 hero 属性

添加一个 hero 属性，给他一个名称备用

hero = 'Windstorm'

显示英雄

在模版文件中，绑定 hero 属性的数据

<h2> {{ hero }} </h2>

显示 HeroesComponent 视图

使用元素选择器，把 HeroesComponent 添加到 AppComponent 模板文件中

<h2> {{ hero }} </h2>
<app-heroes></app-heroes>

创建 Hero 类

创建 Hero 类，并给他添加 id 和 name 属性

export interface Hero {
  id: number;
  name: string;
}

然后在 HerosComponent 类中导入 Hero 类，把组件的 hero 属性的类型重构成 Hero，然后以 1 为 id，以 Windstorm 为名字初始化她

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
//  重构
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };

  constructor() { }

  ngOnInit() {
  }

}

注意 hero 的类型，从字符串变成了对象，所以模版中无法显示，想要查看 hero 对象的 id 和 name 需要写成 {hero.id}} 的形式～

UppercasePipe 格式化

可以使用 uppercase 调用内置管道 UppercasePipe，让属性显示为全大写如下

<h2>{{hero.name | uppercase}} Details</h2>

这里的（|）是管道操作符号，用来调用管道。管道是格式化字符串、日期和其他显示数据的一个技巧，Angular 提供一些内置管道，也支持自定义管道。

编辑英雄名字

可以通过 <input> 输入框中编辑英雄的名字。希望能在输入的时候，同时显示和修改英雄的 name 属性，也就是说想要让数据流从组件类流出到屏幕，然后从屏幕流回到组件类，这需要 数据双向绑定 来实现～

双向绑定

双向绑定的语法为 [(ngModel)]，代表 hero.name 属性流到 HTML 的 textbox 元素，以便数据流双向流动：从 hero.name 属性流到 textbox，然后从 textbox 流回到 hero.name～

<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

注意要添加 FormsModule 到可选块，ngModel才能有效运行～

顶层类 AppModule

元数据：如何把 app 的部分组合在一起，以及 app 需要哪些依赖和库的信息，叫做元数据。元数据可能在 @Component 中，被加到组件类上；也可能在 @NgModule 中起到关键作用。最重要的 @NgModule 装饰器位于顶层类 AppModule 上～

显示列表

在类中添加 heroes 属性，以便暴露 HEROES 数组供绑定用。

export class HeroesComponent implements OnInit {

  heroes = HEROES;
}

使用 `*ngFor` 列出数据

*ngFor 可以用来遍历数据，他是一个 repeater 指令，为列表中的每项数据 repeat 他的 host 元素。

<li *ngFor="let hero of heroes">

<li> 就是 *ngFor 的宿主元素
heroes 是来自 HeroesComponent 类的列表
当依次遍历列表时，hero 会给每个迭代保存当前的 hero 对象

查看详情

需求：用户点击列表中的英雄时，组件在页面底部显示所选的详情方法：监听条目的点击事件，并更相应的详情

添加 click 事件绑定

向 <li> 元素插入一个点击事件的绑定代码：

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

click 外面的圆括号让 Angular 监听 li 元素的 click 事件。当用户点击 li 元素时，Angular 执行表达式 onSelect(hero)。onSelect() 是一个方法，可以显示 *ngFor 表达式所定义的英雄 (hero)

—坑～—

Angular 入门 - 英雄之旅教程（坑）