学习内容

这一篇的内容，是纪录阅读官方文件 tutorial: A Hero Editor 的笔记，这一篇的内容只会有上半部，明天会写出下半部内容。

创建出一个新的元件

step1.
假设我们现在已经有一个 Angular 最基本的专案，接着，在终端机输入创建元件的指令 ng generate component heroes ，它可以让我们创出一个叫 heroes 的元件。
以上创建的指令有一个更简便的写法 ng g c heroes ，一样会创出一个 heroes 的元件。
创建完之後，专案的档案结构会长的像下面这样

step2.
元件资料夹构成，从 step1 图片中可以看到 heroes 元件主要有三种档案，分别为
heroes.component.css, heroes.component.html, heroes.component.ts

heroes.component.ts

首先，来看一下 heroes.component.ts 的内容

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

在上面的内容有看到 class 有加上 export，加入 export 之後，才有办法在专案中的其他角落引用这个元件档案。

元件属性设定

在这个档案中我们可以在 @Component 看到以下三个属性:
selector: 为这个元件 HTML 标签的名称，也就是当我们要在父层中将这个元件挂到它的画面上的话，就会使用到这个 selector 的内容罗，例如:

<div>
	<app-heroes></app-heroes>
</div>

templateUrl: 这个参数会放定义这个元件 html 内容的档案的路径
styleUrls: 这个参数会放定义这个元件 css 内容的档案的路径

HeroesComponent class 内容

ngOnInit - lifecycle hook

另外，还有看到 ngOnInit ，它是这个元件的 lifecycle hook。
lifecycle hook 是代表元件不同的生命周期，我们可以透过不同阶段的生命周期，来为这个元件设定初始化行为 或是 消灭该元件的时候要解绑绑定事件 ...等等的操作，但这边就先不详述 lifecycle hook 了。

component data && event

在跟 ngOnInit 一样的区域可以用来放这个元件自订义的资料和函式。
比如:
若我要为这个 heroes 元件定义一个 hero 资料那我就在里面写入

export class HeroesComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
  }
  
  hero = 'Windstorm'  // 元件自订义资料
}

接着，我们就在 heroes 元件的 html 档案中，将这个 hero 资料挂上去

--- heroes.component.html ---
<h2> {{ hero }} </h2>

在画面展示元件内容

接下来，我们要将 heroes 元件挂载到画面上，那我们就要使用 heroes.component.ts 档案里面的 selector 的 HTML 标签，将其加到 app.component.html 中。
step1.
但是在这之前要先把该元件加入到所属的模组当中，而因为 heroes 元件会被加入到根模组底下，所以，会把 heroes 元件汇入 app.module.ts 档案里面，像下面这样

--- app.module.ts ---
import { NgModule } from '@angular/core';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

可以看到先 import heroes 元件，并在在 declarations 里面加入 HeroesComponent，这样就可以让 app 这个元件知道 HeroesComponent 是谁了。

step2.
接下来，将元件内容挂载到画面上，就像以下这样

--- app.component.html ---
    <h1>
      Tour of Heroes
    </h1>
    <app-heroes></app-heroes>

这个时候你的画面中，应该就会出现 heroes 元件的 hero 的内容罗，像下面这张图一样。

创建 Hero 资料格式的介面

接下来，要定义 heroes 元件的资料型别。
在 app 资料夹底下，额外创一个 hero.ts 的档案，里面放的是用来定义 hero 元件资料型别的档案

--- hero.ts ---
export interface Hero {
	id: number;
	name: strnig;
}

这个档案中，我们定义了一个 Hero 的介面，里面限定了两种属性分别为 id 和 name，并限定这两个属性的型别分别为 number 和 string。

接着，我们就把上面 hero.ts 引入我们的 heroes.component.ts 档案中。

--- heroes.component.ts ---
import {Hero} from './hero'

export class HeroesComponent implements OnInit {
    // ...
  hero : Hero = {
		id: 1,
		name: 'windstorm'
	}
}

此时，因为 Hero 的引入限定了 hero 资料格式。这个时候 hero 变成了一个含有 id 和 name 的物件。
所以，我们要改一下 heroes.component.html 取用 hero 的方式，要改为物件的方式来调用资料。

--- heroes.component.html ---
<h2> {{ hero.name }} Detail</h2>
<div><span> id: {{ hero.id}} </span></div>
<div><span> name: {{ hero.name}} </span></div>

将字体的格式改成大写 - pipe

在 Angular 里面有许多它们自己内建的 format，像是将字体全变成大写或者位数字加入钱符号的 API，在官网上都有提供范例。

在这个范例我们会使用 uppercase 这个 API，来将姓名全部改为大写。

加入的方法很简单，就是在要更改资料後面加上一竖 | (它叫做 pipe)，後面再接要使用的规则规则，就可以罗。
所以，按照上面的方法，程序码的内容如下

--- heroes.component.html ---
<h2> {{ hero.name }} Detail</h2>
<div><span> id: {{ hero.id}} </span></div>
<div><span> name: {{ hero.name | uppercase }} </span></div>

经过上面的操作，最终画面应该会长的像下面这样

Summary

在这边做一个小结论，经过以上的操作我们学到了:

1. 如何在 Angular CLI 专案中新增一个元件
2. 在元件的 ts 档案中，透过 @Component 的 selector, templateUrl, styleUrls 来指定这个元件的 HTML 标签名称、它要吃哪一个 html 档案的内容 和 它要吃哪一个 css 档案的内容。
3. 如何将元件加入父层的样板中
4. 如何新增 interface 档案，并将它引入元件中来限定元件资料属性的内容和型别
5. 如何使用 Angular 提供的 pipe 效果，来更改画面上的内容