iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
Modern Web

Angular - 從零開始系列 第 11

Angular - 從零開始 - Day11 -元件型指令

  • 分享至 

  • xImage
  •  

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 樣式,並不會渲染到其他元件。
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 {}
}

上一篇
Angular - 從零開始 - Day10 -範本參考變數基本認識
下一篇
Angular - 從零開始 - Day12 - 屬性型指令
系列文
Angular - 從零開始25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言