IvyAngularの動的ヘッダーバーおよび/またはコンテンツアプリ

(Nasreddine Skandrani)(2020年6月24日)

たとえば、ユーザーのタイプごとに、異なるヘッダーバーやコンテンツが必要になる場合があります。方法を確認しましょう。

注:
Angular Ivy(Angular 8以下)を使用していない場合。
このgithub号の私の投稿 に良いリンクデモを追加しました。古い角度バージョンでモジュールを手動でレイジーロードするのに役立ちます。
Ivyを有効にしている場合は、解決策が提示されている記事を読み続けてください。

シナリオ1:動的ヘッダーバー同じコンテンツ

ソリューション1

このソリューション1のオンライン

デモを確認してください。

このソリューション1では、名前付きのrouter-outletを使用して

を処理します。残念ながら、loadChildrenと名前付きrouter-outlet での遅延読み込みには、現在Angularにバグがあります。

バグGithubの問題-> https://github.com/angular/angular/issues/12842

このデモでは、ログに次のエラーが記録されます:

したがって、現時点では、 `loadChildren`を使用したこのソリューション1は機能していませんが、いつかは機能する可能性があります。

ソリューション2

オンラインの

デモで確認してくださいこのソリューション2。

このソリューション2では、この記事を利用します。したがって、HeaderbarSelectorComponentにルーティングしてから、このコンポーネント内から標準の条件付きで適切なモジュールを遅延ロードします。

demo2では、2を切り替えることができます。ページの本文にあるボタン

を使用してヘッダーバーを表示し、ページを再読み込みします。

❤️

このソリューションデモで確認できるように、は完全に機能しています。❤️

シナリオ2:動的コンテンツを含む動的ヘッダーバー

同じ戦略を適用します動的コンテンツ読み込みのscenario1 / solution2として。

この投稿は役に立ちました! 👏👏👏
ありがとうございます

参照: 18093 12088 12842

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です