本文内容

阅读官方文件 Angular Components Overview 的笔记内容。

Component 的简介

Angular 专案大致上都是由各个大大小小的元件所组成的。
在每一个元件中大致上都是有以下的内容所组成的

1. HTML template 定义该元件会有什麽内容会被渲染到页面上
2. TypeScript 档案定义该元件的行为
3. CSS selector 定义该元件要怎麽被加到其他的 template 中。
4. CSS 样式档，这个档案是可以选择不定义它的，主要定义该元件的 CSS 样式。

创出一个 Angular 的元件

Angular CLI 状态下创出新的元件

如果，你是在 Angular CLI 的专案状态下要新创一个元件的话，是非常简单的喔，
你只要在终端机为该专案输入以下指令 ng generate component <component-name> ，
或者输入简写指令 ng g c <component-name>，两者的效果都一样，会在你的专案中产出一个 component-name 的元件资料夹，可以在这个元件资料夹底下看到以下的档案

1. <component-name>.component.ts: 用来定义该元件的行为
2. <component-name>.component.html : 用来定义该元件的 html 内容
3. <component-name>.component.css: 定义该元件的 css 样式
4. <component-name>.component.spec.ts: 用来撰写这个元件的测试设定

手动创出新的元件

在官方文件中 有完整的教学步骤，步骤不多，所以，笔者这边就先不赘述了。

指定元件的 CSS selector 名称

我们会在元件的 ts 档案中定义它的 css selector 名称，之後，我们将这个 css selector 加到其他 html 档案中的时候，Angular 可以藉由这个 css seletor 要知道去哪个元件档案中去取得它的 html 样板内容。
它的位置会出现在元件的 ts 档案的以下这个位置，而 selector 属性内容就是这个元件的 css selector 名称。
[TypeScript]

@Component({
  selector: 'app-product-list',
})

定义元件的 html 样板

元件中的 html 样板档案定义的内容，就是告诉 Angular 应该要将什麽内容渲染到画面上。
而定义元件的 html 样板档案有两种方式:

1. 参照一个外部的档案
2. 直接写在档案中

方法一: 我们来写一个参照外部档案的范例
[TypeScript]

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
})

以上的范例，就会去参照跟这个档案相同层级资料夹中的一个叫做 product-list.component.html 的档案，作为这个元件的 html 样板档案。

方法二: 我们写一个直接写在档案里面的范例
[TypeScript]

@Component({
  selector: 'app-product-list',
  template: '<h1>This is A product component H1</h1>',
})

若 html 样板内容是多行的话加入 backticks 来写

上面的范例，我们只有写一行 html template 的内容，如果，我们要写多行的话，按照上面用单引号(')把内容包起来的写法，就必须还要注意要将多行的内容的字串整并起来的问题。
所以，在官方文件中就有建议我们直接用 backticks 来将多行 html template 内容包起来

@Component({
  selector: 'app-product-list',
  template: `
    <h1>This is A product component H1</h1>
    <p> This is a paragraph </p>     
  `
})

Note:
不知道你有没有注意到，如果是参照外部 html 档案的时候，属性是 templateUrl，如果，是直接在元件档案里面定义 html 内容的话，属性是 template。
另外，在元件的档案里面只能出现 templateUrl 或 template，不能同时出现在同一个元件档案中。

定义元件的 css 样式

元件的 css 样式的指定方式，跟 html 样板的指定方式一样，有两种一种是指定外部的 css 样式档案，另一种就是直接在元件的档案里面定义。

方法一: 指定外部的 css 样式档案

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css']
})

可以看到上面的 styleUrls 属性里面就是放着指定的 css 档案。
眼尖的大家，应该都有注意到 styleUrls 是用阵列的型式，将要引入的 css 样式档案放在里面，这代表了什麽呢?!!
代表我们可以引入一个以上的 css 样式档，写法如下

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css', './ramble-style.css']
})

上面我们再加入一个叫 ramble-style.css 的档案到我们的元件的 css 引入档案中，这代表了这个元件会同时引入 product-list.css 和 ramble-style.css 这两个样式的档案内容。

方法二: 直接将样式设定写在档案中

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styles: ['.practice { color:red;} div{ border: 1px solid black;}']
})

写法差不多，就是在 styles 属性里面写入一个阵列，里面就直接放这个元件档案会用到的 css 样式。

Note:
一样要注意的地方是，当引入外部指定的 css 样式档案的时候，它是接在 styleUrls 後面，而直接将 css 样式写在元件档案中的话，是接在 styles 属性的後面。这两者的不同要稍微注意一下喔~~

Summary

ok~ 这边来做个总结吧

1. 我们可以在 Angular CLI 的状态下，利用指令 ng g c <component-name> 来创出一个新的元件。
2. 元件的档案大致上都会拥有以下四种档案: component.html, component.ts, component.css, component.spec.ts
3. 元件在 html 样板和 css 样式的定义上，都有两种办法，分别是指定外部某个档案，另一个是直接写在元件的档案里面。
4. 要特别注意外部引入 html, css 档案和直接写在元件档案中，所使用的属性是不一样的(templateUrl, template, styleUrls, styles)。