コンポーネントテンプレートを動的に指定する方法はありますか?

はじめまして。Angular1ねんせいです。

Angular8にてニュースアプリを開発しているのですが、
記事データを返すAPIの他にレイアウトIDを返すAPIがあり、
そのレイアウトIDを元にview(html, css)を動的にを変更する要件があります。

下記のように list-item.component.ts 内の templateUrl styleUrls を動的に指定したいのですが、Angularの設計思想的にそもそもこのような実装は可能なのでしょうか?拙い説明で恐縮ですが、ご教示をお願いいたします。

//記事一覧ページ
list
├ list.component.ts <-- list-item に記事IDとレイアウトID(id: number)を渡す
├ list.component.html
└ list.component.css

//記事詳細ページ
list-item
├ list-item.component.ts <-- レイアウトIDを元に読み込むhtml, cssを動的に指定
├ list-item-1.component.html
├ list-item-1.component.css
├ list-item-2.component.html
├ list-item-2.component.css
├ list-item-3.component.html
└ list-item-3.component.css
1 Like

一番かんたんなのは愚直にngSwitchですかねー。

<ng-container [ngSwitch]="layoutId">
  <list-item-1 *ngSwitchCase="'1'" [articleId]="articleId"></list-item-1>
  <list-item-2 *ngSwitchCase="'2'" [articleId]="articleId"></list-item-2>
  ...
</ng-container>
2 Likes

@Component() デコレータの中のメタデータを動的に変更することは不可能です。
ukyoさんの例のようにテンプレートの中で条件分岐するのがいちばんシンプルだと思います。

1 Like

@ukyo @lacolaco
ありがとうございます!頂いた実装方法を試みてみます!