在Angular 5组件中如何有条件地加载templateUrl HTML文件

Question

我的项目中有一个场景，考虑到我有一个名为testDynamic的组件。

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

需要检查覆盖文件夹中是否存在override1.html文件，如果存在，则将该文件作为templateUrl加载，否则加载组件默认的test-dynamic.html文件。你有任何想法如何实现这一点吗？

请参考以下图片以更清楚地理解：

- ranjit redekar

---

请查看以下内容：<br> https://dev59.com/IVwZ5IYBdhLWcg3wPONM%5B/link%5D - GSK

@GSK 谢谢，我看到你分享的链接并在本地主机上尝试了，但几乎所有的解决方案都不能与 Angular 5 兼容。 - ranjit redekar

请参考此链接 https://dev59.com/ilcO5IYBdhLWcg3wsjtk - ranjit redekar

Answer 1

请参考以下链接，这是一个动态templateUrl的好例子。 Angular 2/4组件与动态模板或templateUrl

- ranjit redekar

Answer 2

您不能添加多个HTML文件。

您可以使用 *ngIf 或 *ngSwitchCase 来仅在需要时显示模板的部分内容。这样，您只需要一个模板HTML文件。

然后，您的模板HTML将类似于以下内容：

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

- Rukshan Dangalla

---

谢谢您的回答，但对我来说不起作用，因为我们正在构建一个基于Angular的框架，这是向用户提供模板覆盖功能的一种情况。我的问题是，在AOT之前是否可能实现？ - ranjit redekar