[從 0 開始的 Angular 生活]No.19 Angular 元件型指令 (Componemt Directives)

發表於 | 更新於 | 分類於

前言

接下來要介紹三種不同的 Angular 指令，而這裡的指令就是之前一直提到的 Directives 。 Angular 指令有元件型、屬性型、結構型這三種指令，接下來會一一介紹當中差異。

三種 Angular 指令 ( Directives )

  • 元件型指令
    • 預設的元件就是一個含有樣板的指令
  • 屬性型指令
    • 這種指令會修改元素的外觀或行為
    • 如 ngStyle 、 ngClass 指令可以自由的調整樣式
  • 結構型指令
    • 這種指令會透過新增或者刪除 DOM 元素改變 DOM 結構
    • 例如 ngIf 、 ngFor 、 ngSwitch 就可以控制 DOM 結構
      • 特別注意 ngSwitch 前面不要加上星號
      • ngIf 、 ngFor 、 ngSwitchDefault 、 ngSwitchCase 前面要加上 * 號

元件型指令

之前建立的 HeaderComponent 就是屬於元件型指令，它是 Component 同時也是 Directives 。

接下來再次新建一個 Component 練習吧，輸入 ng g c footer ，這次我們建立 FooterComponent 。

  • 同先前建立 HeaderComponent 步驟，在此不贅述，把程式碼搬運到對應檔案即可

最後別忘了在 AppComponent 內輸入 FooterComponent 的元件型指令，也就是

1
<app-footer></app-footer>

接著測試看看是否正常運行

觀察 FooterComponent 的 class ，可以發現只要這是一個 Conponent ，那麼就一定會有一個 裝飾器 ( decorater ) 宣告在上方，如：

FooterComponent

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit() {
  }

}

裝飾器 ( decorater )

  • 裝飾器的語法為 @ 開頭，後面接一個 decorater 的名稱。
    • 所有的 Conponent 都會有一個名為 Conponent 的 decorater
  • 然後傳入一個物件，這個物件用來描述 Conponent 有哪些特性，如
    • selector 選取器
    • templateUrl - 指出 template 路徑在哪裡，如果不輸入路徑也可以使用 template 屬性，直接輸入該 template 內容即可
    • styleUrl - 與 templateUrl 不同，後面接的是一個陣列的型態，意思也就是可以輸入多個不同的 CSS 檔

template 的例子，如果不想把 template 獨立成一個檔案，可以這麼寫

擷取畫面片段

可以發現這麼做之後，網頁的 footer 仍然是正常的。

不過還是建議獨立成一個檔案比較好，畢竟這樣子實在是不容易閱讀。

事實上裝飾器內可以使用的屬性還有非常多，用到時再查文件就可以了。

styleUrl 的例子，來寫一點 CSS

這個檔案是由 Angular CLI 自動幫我們產生的，因此預設是空白的，讓我們隨意寫一點樣式吧。

  • 把 footer 底下的 copyright 字樣改成黃色
    1
    2
    3
    4
    5
    6
    7
    <p class="text-muted credit">
      Copyright © 2016 by <a href="https://www.facebook.com/will.fans" target="_blank">XCVGYU</a>
      @ <a href="http://www.miniasp.com/" target="_blank">XCVGYUXCVGYU</a> -
      Powered by <a href="http://dotnetblogengine.net/" target="_blank">BlogEngine.NET</a> 3.2.0.3 -
      Design by <a href="http://seyfolahi.net/" target="_blank"
        title="Farzin Seyfolahi - UI/UX Designer at BlogEngine.NET">FS</a>
    </p>

調整 credit ，這邊為了方便示範所以直接使用 !important 強制覆蓋。

1
2
3
.credit{
  color: yellow !important;
}

接著執行開發伺服器查看效果：

元件內的 CSS 不會影響到其他元件？

之前有提到，在這裡設定的 CSS 只會套用到該元件，不會影響到其他元件，超出 FooterComponent 範圍外的通通不會吃到這裡設定的 CSS 樣式。

這可以透過開發者工具觀察 Angular 是如何辦到的！

Angular 在這些動態產生的 diretive 下所有的標籤全都被加上了一個底線開頭的 attribute 屬性，而且有一定的規律可循。

像是根元件上的 _nghost-tij-c0 ， 0 是個編號，只要遇到不重複的 Component 就會有一個唯一的、不重複的編號。

.credit 類別被動態注入到頁面上時，它的選取器並不是單純的 .credit ，而是 .credit 後面加上中括號包覆 attribute 的選取器。

而這個 attribute 剛才說過是個唯一的值，這也是為什麼寫在元件內的 CSS 不會影響到其他元件的原因。

讓元件內的 CSS 會影響到其他元件

可以在裝飾器內新增一個屬性 encapsulation ，要把這部分的封裝調整成 none ，具體設定如下：

1
2
3
4
5
6
@Component({
  selector: 'app-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.scss'],
  encapsulation: ViewEncapsulation.
})

  • 預設是 Emulated ，也就是模擬的意思，就是指 CSS Style 的封裝，
    • 在此要把它改成 none ，意思是不需要進行 CSS Style 的封裝。

如此一來，這個 .credit 就會渲染到整個網頁了。

Image

設定後，現在當 .credit 類別被動態注入到頁面上時，它的選取器已經是單純的 .credit 了，也就是說這個網頁所有用到 .credit 這個 class 都會吃到字體顏色變成黃色的設定。

以上就是元件型指令在使用上可能會用到的一些設定與注意事項，接下來要介紹的是屬性型指令。

0%