アンギュラ2のコンポーネントのコンテンツをプログラムで設定しました

Question

ヘッダーを持つ単純なウィンドウコンポーネントを作成しました。私のアプリは一度に1つのウィンドウしか表示しないので、私はそれを私のアプリのルートに置き、必要なときにその内容を変更するだけです。

アプリのさまざまな場所からウィンドウコンテンツを設定できるようにするために、コンポーネントがバインドされているサービスを作成しました。このようにして、私が必要とするどこからでもサービスのメソッドを呼び出すことができ、ウィンドウコンポーネントのプロパティを変更できます。

ただし、サービスのやり方はわかりませんが、ウィンドウのコンテンツとして表示されるコンポーネントのインスタンスを指定することです。どういうわけかプログラムによって、ウィンドウコンポーネントのng-contentを設定しますか？

私の現在の回避策は、ウィンドウのコンポーネントで指定されたすべての可能な内容を持つ、このよう*ngIfで正しいものを選択します

<contentA *ngIf="windowService.getContent()='a'"></contentA> 
<contentB *ngIf="windowService.getContent()='b'"></contentB> 
<contentC *ngIf="windowService.getContent()='c'"></contentC> 

それは十分に動作しますが、リストを維持するために長く困難になっています。私はまた、本当に何も関係がないこれらの他のすべてのコンポーネントと結合された私のウィンドウコンポーネントが好きではありません。さらに、それぞれの異なるコンテンツには独自の入力パラメータがあり、今度はウィンドウサービスとコンポーネントでそれらを追跡する必要があります。

私の質問は次のとおりです。私がこの種の問題を解決するかどうか分からない角度に特徴がありますか、それとも別の方法でアプローチすべきですか？

ng-contentタグをウィンドウコンポーネントに配置して、何とかそのタグを必要なものに置き換えるサービスを取得しています。または、私は窓のコンポーネントの中にrouter-outletを置くべきですか？私はコンテンツを変更するとナビゲーションと見なすべきではないというどちらのアプローチも気に入らない。私はすでに、このコンポーネントとは関係のないコンセントを持っています。

Answer 1

あなたの現在の方法は実際には効率が悪く、拡大縮小が難しいでしょう。あなたはAngular's Dynamic Components

になっているはずです

は、この情報がお役に立てば幸いです。

更新日ほとんどの場合、ルーティングは必要なものになりますのでご注意ください。ダイナミックコンポーネントは、アプリケーションの状態（つまりURL）を変更したくない動的コンテンツの（名前が示すように）優れています。私がダイナミックコンポーネントにあなたを紹介したのは、すでにルータを使用していて、別の解決策を探していると述べたからです（技術的にはネストされたルートとポップアップルートがあるかもしれませんが）。

Answer 2

私はヘッダーを持ち、いくつかの内容を示す簡単なウィンドウコンポーネントを作成しました。私のアプリは一度に1つのウィンドウしか表示しないので、私はそれを私のアプリのルートに置き、必要なときにその内容を変更するだけです。

この正確なシナリオを目的とする主要な角度機能はルータです。その目的は、ヘッダーとフッター内の特定のコンポーネントをルーティングすることです。

たとえば、ヘッダーとメニューがあるメインページです。これは、現在の映画Listコンポーネントにルーティングされるので、メニューの下にそれを示しています

ユーザーが特定の製品をクリックすると、ルーティングは自動的に適切な移動の詳細コンポーネントと一緒に映画Listコンポーネントを置き換えます：

は、あなたが何をする必要があるかと、このマッチングですか？