在Angular 6组件中的两个不同templateUrl之间进行更改答案

【问题标题】：Change between two different templatesUrl in Angular 6 component在Angular 6组件中的两个不同templateUrl之间进行更改
【发布时间】：2019-03-09 13:47:36
【问题描述】：

在 Angular 6 中，每个组件都有两个不同的模板 .html，我们需要根据部署的环境对其进行更改。

我们正在寻找这样做的最佳实践。

考虑解决方案：
- 无法将 var 传递给组件装饰器。
- 由于 Angular CLI 6 它可能生成多个项目（ng generate --application）。

最后一点可能是一个解决方案，但我们需要共享相同的路线。

【问题讨论】：

更改每个构建的 url？你也尝试过使用 ngif 的吗？
您最安全的选择是使用 webpack 或类似的预处理工具将组件的 templateUrl 重写为另一个在通过其余管道之前。利用一些命名约定（例如cmp-name.template.a.html 和cmp-name.template.b.html）。
使用ngIfs 会用不必要的代码使应用程序膨胀。你不能摇树模板（还）。
@LazarLjubenović 谢谢。我们之前看到过这种方法，这是我们第一次接触，但一些用户不推荐它。相反，他们坚持建议使用 cli commnad 作为最佳实践生成不同的项目，因为这违背了角度原则。但是这种方式的主要问题应该是每个项目共享相同的路由。

标签： angular routing components command-line-interface multiple-projects

【解决方案1】：

当我们正在寻找一个用于字符串替换的 webpack 插件时，我们在 this github 参考中找到了一种非常简单的方法。

关键是将组件装饰器“templateUrl”更改为“template”，并使用vars传递一个require，例如：

var url = environment.option ? '.other' : '';

@Component({
  selector: 'app-root',
  template: require('./app.component' + url + '.html'),
  styleUrls: ['./app.component.scss']
})

【讨论】：