如何在Angular 5组件中有条件地加载templateUrl html文件答案

【问题标题】：How to load conditionally templateUrl html file in Angular 5 component如何在Angular 5组件中有条件地加载templateUrl html文件
【发布时间】：2018-10-03 03:02:45
【问题描述】：

我的项目中有一个场景，考虑一下，我有一个 testDynamic 组件

@Component({
    templateUrl: "./test-dynamic.html", // Need to override this file
    styleUrls: ['./test-dynamic.css']
})
export class testDynamic {
    constructor() { }
}

这里需要检查override文件夹中是否存在override1.html文件，然后将该文件加载为templateUrl，否则加载组件默认的test-dynamic.html。知道如何实现这一目标吗？

请参考下图清楚了解

【问题讨论】：

您将检查以下内容：
stackoverflow.com/questions/31692416/…
@GSK 谢谢，我阅读了您的共享链接并在 localhost 上进行了尝试，但几乎所有解决方案都不适用于 Angular 5。
参考此链接stackoverflow.com/questions/45376628/…

标签： javascript angular typescript webpack angular5

【解决方案1】：

参考以下链接，这是一个很好的动态templateUrl示例

Angular 2/4 component with dynamic template or templateUrl

【讨论】：

【解决方案2】：

您不能添加多个 HTML 文件。

您可以做的是，使用 *ngIf 或 *ngSwitchCase 仅显示模板的一部分（如果这是您的意图）。那么你就只有一个模板html文件了。

然后你的模板的 html 将是这样的：

<div *ngIf="YOUR_CONDITION">View 01</div>
<div *ngIf="YOUR_CONDITION">View 02</div>

【讨论】：

感谢您的回答，但它对我不起作用，因为我们正在 Angular 上构建框架，这是为用户提供模板覆盖工具的一种方案。一个问题是在 AOT 之前有可能吗？