問題タブ [angular2-router3]

どのコンテンツ ページにも挿入できるプラグインとして TYPO3 に組み込まれる angular2 アプリケーション/ウィジェットを構築しています。これは、たとえば次のように、異なるルート パスに到達する可能性があることを意味します。

グローバル ベース URL (base href=..) は TYPO3 によって既に設定されており、変更できません。ルートを正しく構築できるように、Angular にある種のルート プレフィックスを与えるにはどうすればよいですか?

ここに記載されているように、新しいルーターを使用しています: https://angular.io/docs/ts/latest/guide/router.html

Angular2 ルーターで問題を再現しようとしていますが、Plunker でプロジェクトの作業コピーを作成できません。

これが私の試みです: https://plnkr.co/edit/1lpoYP4qlBZLuqZHW7Ft

ファイルで次のコード行を使用してindex.html、Plunker の実行環境と''デフォルト パスで動作するルート パスを作成しました。

なぜまだこのエラーが発生するのですか?

ルーティングで Angular2 を使用していますが、初期読み込み時にページに重複したコンテンツが表示されます。リンク（ページ1またはページ2）をクリックすると、すべてが完璧に機能します（重複するコンテンツはなくなります）。初期ロード時にコンテンツが重複するのはなぜですか? また、コンテンツを 1 回だけ表示するには何が必要ですか?

スクリーンショット

index.html

App.module.ts

App.html (これは最初のリクエスト時に読み込まれます)

マイページのレイアウトはこんな感じ

ユーザーがPage1をクリックした場合、左側のメニューを更新してPage1の子をリストしたい、ページ2をクリックした場合、メニューのリストを更新してPages 2の子を表示したい

これは私のルーターが現在どのように見えるかですが、エラーが発生しています

エラー: どのルートとも一致しません。URL セグメント: '' at ApplyRedirects.noMatchError

index.html

スクリーンショット UI は期待どおりに見えますが、コンソール ウィンドウにエラーがあります

Page1.component

名前付きアウトレットを使用するように Pag1Component を更新するとすぐに、解析エラーがスローされます。

{{アイテム}}

これにより、ページ全体が吹き飛ばされ、何も表示されず、コンソール ウィンドウで解析エラーがスローされる

エラー: (SystemJS) テンプレート解析エラー:(…)(匿名関数) @ (インデックス):20ZoneDelegate.invoke @ zone.js:232Zone.run @ zone.js:114(匿名関数) @ zone.js:502ZoneDelegate.invokeTask @ zone.js:265Zone.runTask @ zone.js:154drainMicroTaskQueue @ zone.js:401ZoneTask.invoke @ zone.js:339

これを行うより良い方法はありますか

私はシンプルなUIを持っています

上記の routerLink バインディングは失敗し、常に次のように失敗します。

エラーは理解できますが、実際に routerLink を material2 ボタンまたはボタン アイコンに追加する方法はありますか?

このような単純な手順が非常に不可能に思えることを受け入れるのはかなり難しい.

私は以前に質問をして、2016年6月に機能する回答を得ました-その回答は機能しなくなりました( material2ツールバー、ボタン、およびangular-cliルーターの使用方法)

ありがとう

レシピをクリックすると、ネストされたルートに表示さRecipe Bookれるリストを持つようにアプリを設定しました。これには、クリックすると 内のネストされたルートに材料をロードするボタンもあります。RecipiesRecipe DetailsRecipes Details

これまでのところ、ルーティングは機能しているようですが、別のRecipe. Ingredientsトレイ（ルート）がアクティブな場合、レシピが変更され、Ingredientsルートが折りたたまれます。次に、（材料を開かずに）ナビゲートしようとすると、次のエラーが表示されます。

ルーターIngredientsをアクティブにする必要があるようです。そうしないと、ネストされたルートを認識できません。それは私の見解ですが、それを修正する方法やいつ間違ったのかわかりません。

シングルレシピ本のページ.component.html

レシピ詳細.component.html

成分リスト.component.html

app.routes.ts (更新)

私はAngular 2のスタイルガイドに取り組んでいますが、この行に出くわしました

-routing.module.ts で RoutingModule のファイル名を終了してください。

ルーティング モジュールの例を見つけることができなかったので、Papa のブログにアクセスしました。そこで見つけたのがこの一行…

forRoot() 関数は、ルート モジュールのルートを作成するためにのみ使用する必要があります。子モジュールとルートに到達したら、後の記事で紹介する他の手法を使用します。

では、提案されているように forRoot を使用していない RouteModule を作成するにはどうすればよいですか。