Angular-コンポーネントの異なるテンプレート

Question

コンポーネント「コース」があります。このコンポーネントをリストに使用します。このリストは水平方向の場合もあれば、垂直方向の場合もあります。コンポーネント内でテンプレートファイルを動的に選択できますか？

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

そのようなものは素晴らしい機能になるでしょう！

Answer 1

このチュートリアルはとても役立つと思います

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

基本コンポーネントを拡張して、テンプレートを上書きするだけです。これにより、まったく同じ機能で異なるテンプレートを使用できるようになります。

Answer 2

確かに、angular 4なので、* ngIf/elseディレクティブがあります。次のようにテンプレートを切り替えることができます。

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

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

画面の幅に応じて、水平レイアウトと垂直レイアウトを切り替えたいと思います。したがって、ObservableMedia-Serviceが含まれている https://github.com/angular/flex-layout を見てください。