Angular - 组件不同的模板

Question

我有一个组件 "course"。我将此组件用于列表。这个列表有时是水平的，有时是垂直的。我可以在组件内部动态选择模板文件吗？

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

类似的功能会很棒！

Answer 1

当然，自 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。

Answer 2

我觉得这个教程很有帮助

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

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