模板樣式

模板是可能包含邏輯的 HTML 檔案。

你可以通過兩種方式指定模板：

將模板作為檔案路徑傳遞

@Component({
  templateUrl: 'hero.component.html',
})

將模板作為內聯程式碼傳遞

@Component({
  template: `<div>My template here</div>`,
})

模板可能包含樣式。@Component 中宣告的樣式與應用程式樣式檔案不同，元件中應用的任何內容都將限制在此範圍內。例如，假設你新增：

div { background: red; }

元件內的所有 div 都將為紅色，但如果你有其他元件，則 HTML 中的其他 div 將完全不會更改。

生成的程式碼如下所示：

你可以通過兩種方式向元件新增樣式：

傳遞一組檔案路徑

@Component({
  styleUrls: ['hero.component.css'],
})

傳遞一系列內聯程式碼

styles: [ `div { background: lime; }` ]

你不應該將 styles 與 require 一起使用，因為當你將應用程式構建到生產環境時它將不起作用。