是否可以切换 Angular HTML 模板？答案

【问题标题】：Is it possible to switch Angular HTML Templates?是否可以切换 Angular HTML 模板？
【发布时间】：2019-09-01 10:03:06
【问题描述】：

假设我们有一个服务持有mobile: boolean 值。根据它，我们为需要它的组件显示适当的 TemplateUrl。

所以它会像TemplateUrl: condition ? template_1 : template_2

我可以使用 require 创建类似的东西，但它不会为 prod 正确构建。当我使用它进入页面时，我看到 null 而不是模板（仅产品）。

Angular 版本 7

【问题讨论】：

一般来说，如果你愿意，可以使用标准的 html/css 设置或 angular + flexlayout 来解决。您遇到问题的原因很可能是因为产品中的 AOT 而不是开发的 JIT。此外，我发现了一个类似的问题：stackoverflow.com/questions/49974776/… 这也告诉您不可能，因为您打算这样做
我不认为你可以有条件templateUrl。假设mobile在运行时是已知的，您可以将两个模板放在同一个模板文件中，并根据条件使用ngIf ... else显示适当的模板。
为什么不把两个变体放在一个模板中并使用*ngIf？
是的，我看到了这个链接，是的，它是关于产品中的 AOT。自 Angular 5 以来已经有一段时间了，所以我有点希望这个主题有所改变。是的，我可以使用 ngIf 或创建抽象类，以及移动/桌面的组件从它继承以将逻辑保存在一个地方 + 为移动设备制作单独的路由，但这是非常丑陋的解决方案。

标签： angular

【解决方案1】：

@Component 声明是静态处理的，具有 AOT 复杂性，不能基于变量提供 templateUrl。

解决此问题的一种方法是将您的逻辑与页面呈现的方式分开。任何在移动设备和桌面设备上显示不同的 UI，您都可以为其创建单独的组件。主组件或共享基类或组件应包含所有逻辑。

<div>

  <p>Graph:</p>

  <graph-mobile *ngIf="mobile" [data]="data"></graph-mobile>

  <graph-desktop *ngIf="!mobile" [data]="data"></graph-desktop>

</div>

【讨论】：

是的，这是解决它的最基本方法，但我正在寻找更聪明的方法（如果有更好的方法来解决它）。顺便说一句：它的坏处是您必须将逻辑复制到 2 个打字稿文件。我正在考虑抽象类+类似但更多基于路由的东西。
我更新了答案，以更清楚地说明不应重复逻辑。路由没问题。您可以尝试动态构建您的应用程序路由或使用激活防护 (CanActivate) 根据移动值重定向用户。