基本上元件會負責頁面樣式的呈現,資料的撈取與處理都會交由 Service 進行,後續會有文章介紹 Service服務。
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 參數。
如同 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 來定義在其他元件內要如何使用這個元件,這裡在 test2.component 定義好了 <app-test2> ,所以只要在 app.module.ts 引入 Test2Component 之後,就可以在 app.component.html 上使用 <app-test2></app-test2> 來使用元件。
未來使用 route 路由方式來載入的話,不會使用到這個屬性,可以使用 --skipSelector 參數來略過這個屬性。
有發現嗎?所有的元件名稱都被加上了 app 的前綴字,如果要更改這個前綴字要在專案建立時帶上 --prefix 參數。如果元件使用與專案不同的前綴字會有警告出現。
介紹到此,已經可以建立出元件了!下一篇開始就開始嘗試將資料放到畫面上吧。