iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
0
Modern Web

從零開始的Angular前端開發系列 第 10

# DAY 10 Directive - Component

在 Angular 中,有個東西叫做 Directive ,中文翻譯作指令,我自己當初是理解很久,還是覺得不直觀,所以我們就還是叫他 Directive 吧。

Angular 中有三種東西都是Directive

  • Component
  • Structural directives
  • Attribute directives

Directive究竟是什麼呢,你可以想成他是一個標籤,會對 DOM 做一些特別的事,比如增加 DOM 節點之類的。DOM 全名為 Document Object Model ,是瀏覽器根據 html 的樣板和標籤,所生成的物件,瀏覽器會將許多 DOM 組成一個 DOM tree。這邊只要先知道,html 和 DOM 是不同的東西就可以了。

Component 建立

我們前面在 AppComponent 上做了許多實驗,卻還沒有建立過自己的 Component。現在我們借用 Angular-CLI 來幫我們建立元件範本。打開 VSCODE 的 terminal ,輸入命令如下,<Component name> 可以隨意輸入你想要的名字:

ng generate component <Component name>

其中 generate 的 alias 是 g,component 的 alias 是 c,所以我的命令這樣下也可以,效果一樣:

ng g c <Component name>

我這邊的範例是 ng generate component homepage ,你還看到這邊我有黃色字的警告,是說我的 Angular-CLI 有新版本,並且本機的 Angular-CLI 版本比專案下的版本還新,不過這個警告我們暫時不用理會。

上面可以看到 Angular-CLI 幫我們 CREATE Component 的範本,一共四個檔案,會自動放在 src/app/ 下,並且幫我們 UPDATE app.module.ts 這個檔案。

Angular-CLI 更新了 app.module.ts的甚麼呢?我們來看:

Angular-CLI 已經幫我們把 Homepage import 進來,而且放進 AppModule 的 declarations 欄位。
那麼現在我們可以使用這個 Component了。

我們到 app.component.html,插入 <app-homepage></app-homepage> 的標籤:

可以看到我們的 HomepageComponent在頁面上顯示 homepage works! 的字樣:

接著看一下剛剛建立的 homepage.component.ts@Component 裡的東西,我們之前都介紹過了。發現 class 裡面多了兩個 function : constructor()ngOnInit()。這兩個都是初始化用的 function,執行順序是先執行 constructor() 再執行 ngOnInit()constructor() 屬於 ECMAScript 標準,而 ngOnInit() 是 Angular 自行定義的。兩個 function 都能用來初始化變數:

其實 constructor()ngOnInit() 的使用情境略有不同,主要就是 Angular 會在Component 跟 Directive binding 完後,才執行ngOnInit(),這時才能從頁面撈一些資料回來初始化變數,詳情可參考這裡 進行了解。

之前有提過,Component 的範本生成時會有四個檔案,csshtmltsspec.ts,這個 css 呢,只會在自己的 component 下生效,我們來實驗一下:

我在 app.component.html中插入:

// app.component.html

<app-homepage></app-homepage>
<h1>AppComponent</h1>

底下的範例 code 太煩了,我把它註解掉。在 VSCODE 中可以整段選起來,按Ctrl + /,可以將選取部分全部註解起來:

然後我在 app.component.csshomepage.component.css,分別各定義兩個 h1 的 css :

// homepage.component.css

h1 {
    background-color: red;
}
// app.component.css

h1 {
    color: blue;
}

background-color 是定義背景顏色,color 是定義字體顏色,我們來看一下效果:


兩個 css 互不影響。如果我們在 src 下的 styles.css,加一點料:

// styles.css

h1{
    color: blueviolet;
}

那麼 HomepageComponent 的字體顏色會被蓋過去,但對於 AppComponent 來說,app.component.css 的優先較高,所以 AppComponent 的字體顏色還是維持藍色。


上一篇
# DAY 9 善用 Extensions 進行開發
下一篇
# DAY 11 Directive - Structural Directive
系列文
從零開始的Angular前端開發30

尚未有邦友留言

立即登入留言