預設「元件」就是含有樣板的指令(最常見),既是 template 也是 component,一般來說提到元件都會先想到 class 類別這個部分。最常直接在網頁標籤中呈現。
之前拆分元件的指令 <app-header></app-header>
這類的 directive,也是代表著一個 component。
假設我有一個元件叫做 <app-home></app-home>
,這樣就產生了一個元件型指令,並且可取用到裡面的元件內容。
selector
: 為元件型指令的選擇器,也是拆分元件時要匯入的標籤名稱。templateUrl
: 則是對應 HTML 的內容,也可以使用 ES6 樣板語法寫入這裡,若改這樣寫,前面的屬性要改成 template
,但一般不會建議這樣寫,因為這樣程式碼太雜亂,在 component 內的程式碼單純一點會比較好。styleUrls
: 是這一頁的 CSS 樣式,可以放入多個 CSS,只有這個元件可以使用這個 CSS 樣式,並不會渲染到其他元件。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 {}
}