Angular Component 元件 - 筆記長也NotesHazuya

Angular Component 元件

2021-01-03 13:10:00   Angular

Component

基本上元件會負責頁面樣式的呈現,資料的撈取與處理都會交由 Service 進行,後續會有文章介紹 Service服務。

建立Component

ng generate component [名稱/路徑] [參數]
ng g c [名稱/路徑] [參數]

頁面與樣式

預設建立元件時,CLI 會將 HTML、CSS 以及 ts 檔案拆開分散不同地方(通常架構也都這樣做),可以指定 --inlineStyle 與 --inlineTemplate 參數來將所有檔案都放在 ts 檔案裡面。

所屬模組

元件要被定義在模組內才能被使用,預設 CLI 會尋找最接近的 module 自動加入,例如我執行:

ng g c demo1

這樣會在 src/app 建立 demo1.component.ts 等相關檔案 ,然後這裡最接近的 moduel 是  AppModule ,這個元件就會被加入  AppModule內。

如果像之前已經建立過 module 的話:

ng g module test2

這樣會有一個 src/app/test2/test.module.ts 的檔案,而如果要建立一個在 test2 下名為 test2 的元件:

ng generate component test2

不需要寫路徑 test2/test2 的,因為他會尋找最接近的 module ,這樣就會連帶元件相關的檔案都建立在 test2 下面了。

 


也可以在檔案名稱直接指定要建立的路徑。

供外部模組使用

如果要讓外部模組引入這個元件,記得加入 --export 參數。

Component 裝飾器

如同 module 一樣, Component 有一個 @Component 類別的裝飾器。

import { Component, OnInit } from '@angular/core';

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

  constructor() { }

  ngOnInit(): void {
  }

}

頁面樣式

CSS 的路徑會被放在 stylesUrls 屬性裡,而樣板(HTML)會被放在 templateUrl 屬性裡。如果有帶上參數讓 CSS 以及 HTML 放在 ts 檔案裡面的話,會有 template 與 styles 屬性直接寫樣式表以及 html 程式碼。

selector 選擇器

selector 來定義在其他元件內要如何使用這個元件,這裡在 test2.component 定義好了 <app-test2> ,所以只要在 app.module.ts 引入 Test2Component 之後,就可以在 app.component.html  上使用 <app-test2></app-test2> 來使用元件。

未來使用 route 路由方式來載入的話,不會使用到這個屬性,可以使用 --skipSelector 參數來略過這個屬性。

前字元 (prefix)

有發現嗎?所有的元件名稱都被加上了 app 的前綴字,如果要更改這個前綴字要在專案建立時帶上 --prefix 參數。如果元件使用與專案不同的前綴字會有警告出現。

結論

介紹到此,已經可以建立出元件了!下一篇開始就開始嘗試將資料放到畫面上吧。

關於作者


長也

資管菸酒生,嘗試成為網頁全端工程師(laravel / React),技能樹成長中,閒暇之餘就寫一些筆記。 喔對了,也愛追一些劇,例如火神跟遺物整理師,推推。最愛的樂團應該是告五人吧(?)