2
提供される@Input EntityTypeプロパティに基づいて、特定の詳細コンポーネントをレンダリングする汎用のマスター/ディテールコンポーネントを構築しました。マスター詳細コンポーネントテンプレート内 、我々はentityTypeに基づいて、適切な詳細コンポーネントをレンダリングするラッパー/ファクトリコンポーネントを呼び出す：「ロシアの人形」コンポーネントによる角度循環依存性
@Component({
selector: 'master-detail',
template: `
<div>
<grid></grid>
<detail-wrapper> [entityType]=entityType></detail-wrapper>
</div>
`,
})
export class MasterDetailComponent {
@Input() entityType: string ;
...
}
@Component({
selector: 'detail-wrapper',
template: `
<ng-container [ngSwitch]="entityType">
<comp-a *ngSwitchCase="'A'"></comp-a>
<comp-b *ngSwitchCase="'B'""></comp-b>
<comp-default *ngSwitchDefault></comp-default>
</ng-container>
`,
})
export class DetailWrapperComponent {
@Input() entityType: string ;
...
}
詳細コンポーネント自体は、（ロシアの人形のような）別の主従成分を含有することができます。この問題が発生したときしかし、私のコードがあるため、円形の依存関係の実行されません。
master-detail -> detail-wrapper -> compA -> master-detail
私は、継承を使用して、各レベルのための複製を作成することにより、循環依存にこれを破る可能性が知っている：
export class MasterDetailLevel2Component extends MasterDetailComponent {...}
export class CompALevel2Component extends CompAComponent {...}
しかし、それを実際には適切なソリューションのようには見えず、各再帰レベルのクラスを作成する必要があります。
もう一つの可能性は、DetailWrapperComponentではなくComponentFactoryResolverを使用することです。 MasterDetailComponentにはコンポーネントファクトリインターフェイスが提供されます（したがって、具体的な実装間のリンクが削除されます）。しかし、このソリューションでは、テンプレートバインディングが失われています。
これを改善する方法はありますか？