模板样式

模板是可能包含逻辑的 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 一起使用，因为当你将应用程序构建到生产环境时它将不起作用。