javascript - Angular 将多个文件更改为内联模板

Question

我有几个 Angular 组件分布在多个文件中，使用 ng generate 创建。

有些组件有内联样式，因为 html/styles 可以非常小，所以在这里使用内联模板是有意义的。

问题是我想将其中几个“多文件”组件转换为内联样式——在 Angular 生态系统中有没有办法做到这一点？

Answer 1

您应该进入组件的 .ts 文件，并在 @Component 装饰器内部将 templateUrl 更改为 template 和 styleUrls 到 styles。然后你可以删除.html和.scss文件，并将它们的代码转移到.ts文件中。

@Component({
  selector: 'app-custom-component',
  template: `<div>Your component inline HTML.</div>`,
  styles: ['div { text-align: center; }']
})

如果您想生成一个带有内联模板和样式的组件，您可以在生成组件时将 --inlineTemplate=true --inlineStyle=true 选项传递给 CLI 来实现:

ng generate component custom-component --inlineTemplate=true --inlineStyle=true