Angular将多个文件更改为内联模板答案

【问题标题】：Angular change multiple files to inline templateAngular将多个文件更改为内联模板
【发布时间】：2021-10-29 20:05:29
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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

【讨论】：