0

ヘッダーがあり、いくつかのコンテンツを表示する単純なウィンドウ コンポーネントを作成しました。私のアプリは一度に 1 つのウィンドウしか表示しないので、アプリのルートに配置し、必要な場合にのみ内容を変更します。

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

ただし、このサービスの使用方法がわからないのは、ウィンドウのコンテンツとして表示されるコンポーネントのインスタンスを指定することです。たとえば、プログラムng-contentでウィンドウコンポーネントを設定できますか?

私の現在の回避策は、ウィンドウコンポーネントで指定されたすべての可能なコンテンツを持ち、次の*ngIfように正しいものを選択することです:

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

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

私の質問は次のとおりです。この種の問題を解決する、私が知らないAngularの機能はありますか、それとも別の方法でアプローチする必要がありますか?

頭に浮かぶのはng-content、ウィンドウコンポーネントにタグを配置し、サービスにそのタグを必要なものに置き換えることです。またはrouter-outlet、ウィンドウ コンポーネント内に配置する必要がありますか? コンテンツの変更はナビゲーションとしてカウントされるべきではないため、そのアプローチも好きではありません。私はすでに、このコンポーネントとは関係のないアウトレットを持っています。

4

2 に答える 2