Day11 Angular牙起來 - 元件 Component 中的設定

今天來看在元件程式中我們之前一直忽略的東西

Component 元件

打開任何元件的程式 .ts 來看，一定都會有 @Component({})，裡面包了幾個參數

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})

selector

selector 為 CSS selector，表示以何種名稱被綁定在樣板中的、怎麼樣可以指名到這個元件。與Javascript的querySelector同理。

所以將 selector 更名為 'app-test123'後，在樣板上也要以 <app-test123></app-test123> 使用

在Angular中，檔案名稱僅影響檔案路徑，不影響如何去呼叫、使用元件，只要宣告有定義好

templateUrl

此元件的樣板.html的檔案路徑

template

也可以捨棄 templateUrl、刪除 test.component.html 檔案
直接在template中寫HTML語法

@Component({
  selector: 'app-root',
  template: `<h1>Hello World</h1>`,
  styleUrls: ['./app.component.css']
})

使用重音號``來包住語法字串，會比起用單引號 ''來的更方便一些

styleUrls

此元件的樣式.css的檔案路徑
styleUrls 結尾有個s表示複數，而是陣列形式，表示可連結多個css檔案

styleUrls: ['./app.component1.css', './app.component2.css']

styles

可以捨棄 styleUrls、刪除 app.component.css 檔案
直接在styles中寫CSS語法
一樣有個s表示複數，而是陣列形式，需用陣列形式包住

styles: ['h1 {color: red;}', 'h2 {color: blue;}'],

裝飾器 decorator @

Decorator 是 Javascript 原本就有的功能，之後延伸到 Typescript 中
被拿來應用在Angular框架上，把參數丟進標示的裝飾器中，產出一個新的物件

裝飾器不只在元件 @Component中出現，未來在指示 @Directive、在服務 @Injectable、在模組中 @NgModule，皆可以見到其身影。

Angular已完成進度 83%