提姆寫程式

0%

Angular 筆記 - 元件型指令

發表於 分類於 Disqus：
最常見的元件型指令

angular

基本認識

預設「元件」就是含有樣板的指令(最常見)，既是 template 也是 component，一般來說提到元件都會先想到 class 類別這個部分。最常直接在網頁標籤中呈現。

使用方式

之前拆分元件的指令 <app-header></app-header> 這類的 directive，也是代表著一個 component。

元件內容介紹

假設我有一個元件叫做 <app-home></app-home>，這樣就產生了一個元件型指令，並且可取用到裡面的元件內容。

  1. 會有至少一個 import 對應這個元件的內容。
  2. 會有一個元件的裝飾器，其名稱為 @Component。
  3. selector： 為元件型指令的選擇器，也是拆分元件時要匯入的標籤名稱。
  4. templateUrl： 則是對應 HTML 的內容，也可以使用 ES6 樣板語法寫入這裡，若改這樣寫，前面的屬性要改成 template，但一般不會建議這樣寫，因為這樣程式碼太雜亂，在 component 內的程式碼單純一點會比較好。
  5. styleUrls： 是這一頁的 CSS 樣式，可以放入多個 CSS，只有這個元件可以使用這個 CSS 樣式，並不會渲染到其他元件。
1
2
3
4
5
6
7
8
9
10
11
12
import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.component.scss"],
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}