Angular - 组件不同的模板

Question

我有一个组件"课程".我将此组件用于列表.此列表有时是水平的,有些时候是垂直的.我可以在组件内部选择dynamicaly模板文件吗？

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

这样的东西将是很棒的功能!

Answer 1

我认为本教程非常有用

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

您只需扩展基本组件并覆盖模板即可.这允许您使用完全相同的功能但不同的模板具有不同的组件.

Answer 2

当然，由于角度为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。