Angular - 组件不同的模板

Posted 2023-03-13

【中文标题】Angular - 组件不同的模板

【英文标题】：Angular - Component different templates

【发布时间】：2017-10-27 00:50:00

【问题描述】：

我有一个组件“课程”。我将此组件用于列表。该列表有时是水平的，有时是垂直的。我可以在模板文件的组件内动态选择吗？

@Component(
    selector: 'course',
    templateUrl: getTemplateFile()
)

这样的功能会很棒！

【参考方案1】：

我觉得这个教程很有帮助

https://scotch.io/tutorials/component-inheritance-in-angular-2

您可以简单地扩展您的基础组件并覆盖模板。这允许您拥有功能完全相同但模板不同的不同组件。

【参考方案2】：

当然，从 Angular 4 开始，就有一个 *ngIf/else 指令。您可以像这样切换模板：

<div *ngIf="isHorizontal; else verticalTemplate">
  <span>horizontal</span>
</div>

<ng-template #verticalTemplate>
  <span>vertical</span>
</ng-template>

我猜，您想根据屏幕宽度在水平和垂直布局之间切换。所以看看https://github.com/angular/flex-layout，它包含一个 ObservableMedia-Service。

【讨论】：

水平和垂直只是我的一个例子。我的问题的主要目的是我希望我的组件有 2 个不同的模板文件并选择我要使用的一个。我不想加载包含所有不同模板的模板文件。

你在使用 angular-cli 吗？

据我所知，没有办法在这个位置动态加载模板，我认为这不是必需的。我认为，推荐的方法是创建两个组件，并在父组件中切换两者，就像我的回答一样。使用 angular-cli，您的模板将被捆绑到 js 文件中，因此无论是否使用，它们都会被加载。延迟加载的最佳方式是使用路由器