以角度将多个文件更改为内联模板

Question

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

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

​

​

问题是，我想把几个“多文件”组件转换成内联样式--在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选项传递给命令行界面来实现：

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