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。