同じページに複数のコンポーネントをロードする角度2

Question

私は角度2のアプリケーションで作業しています。説明を省略し、左側にナビゲーションバーがあり、残りのページにはコンテンツが表示されます。

これらのコンテンツは、（...フォーム、TEST1、詳細）添付画像のように、ナビゲーションバーが4つのアクションが含まれ、ブロックされます

真ん中のコンテンツがすべて表示されますが、私は、フォーム上でクリックしたとき、フォームが中央に表示されます。詳細をクリックすると、詳細ブロックが中央に表示されます。

ユーザーは上下にスクロールしてブロックを表示できます。

私は角2に、我々は正確なアンカーと何ブロック我々が表示したいのユーザー断片ができることを見ましたが、問題は、フラグメントの機能上のバグが存在することです。

瞬間に、私は、ナビゲーションバーの各ボタンにrouterLink内のURLに応じて表示を変更し、ルータ、アウトレットを持っています。同じページにすべてのブロック/コンポーネントを表示したい場合、私はそれを使い続けるべきですか？実際にナビゲートし、より多くのように表示または非表示のいずれかのボタンを切り替えていていないメニューであなたの助けのための

おかげで、

here is the screenshot

Answer 1

だから、本質的に、あなたは多数の部品をしたいです、コンテンツ？ページ更新は何をすべきですか？あなたは同じコンポーネントを見たらそれは重要ですか？もしそうなら、ローカルストレージ/セッションストレージ/ ngrxを使用して状態を保存するか、表示された項目をルートに追加してそれらを解決する必要があります。

とにかく、最後にあなたが* ngIfを使用/非表示を示し、独自のセレクターとの1つのが表示されるかを決定コンポーネント、および自分のコンポーネント内のすべてのブロックをしたいです。

あなたのHTMLは基本的に次のようになります。実際に私が今持っているものは、左側のナビゲーションバーで、連絡先に私をクリックすると、連絡先コンポーネントが中央に表示され

<my-menu></my-menu> 
<my-form *ngIf="showMenu"></my-form> 
<my-test1 *ngIf="showTest1"></my-test1>