問題タブ [routerlink]

ヘッダー コンポーネントには、サード パーティの Web サイトにログインするためのログイン ボタンがあります。アプリ sc2 は、ヘッダー コンポーネントで callbackURL を使用して初期化します。ヘッダーで、sc2 への接続に使用される LoginURL を取得しています。loginURL に状態を追加できます。私の場合は、現在表示しているページの ID を含む文字列です。これは、コールバック URL のパラメーターで返されます。問題は、コールバック URL がメイン コンポーネント (ルーター アウトレットにロードされる) を呼び出すため、ヘッダーが状態で更新されないことです。ヘッダー自体はメイン コンポーネントの上にロードされます。メイン コンポーネントを元のコンポーネントに再ルーティングできません。ボタンをメイン コンポーネントからヘッダー コンポーネントに移動する前はすべて機能していましたが、現在はメイン コンポーネントに送信された状態が最後のページに更新されていません。そのため、メイン コンポーネントを介して元のコンポーネントに再ルーティングすることはできません。使用中のページ。messageService と localStorage を試してみましたが、ヘッダー コンポーネントがオンタイムで更新されないようです。コールバック URL は常にメイン コンポーネントです。ヘッダー コンポーネントと直接通信できますか?

app.component

page.component.ts

ヘッダー component.ts

パラメータを取る RouterLink 要素を持つアンカー要素があります。パラメータは、正しいページに移動するために必要です。別のパスからページをナビゲートすると、ルーター リンクが機能するようになりました。たとえば、ルーター モジュールは次のようになります。

そして、次のようにルーターアウトレットの外側にナビゲーションコンポーネントがあります。

私のナビゲーションには、RouterLink を使用してパスにルーティングする検索バーが'movies/:movieTitle/:year'あり、のようではないパスから来ている限り機能し'movies/:movieTitle/:year'ます。パスが類似している場合、movieTitle と year の引数が異なっていても、angular は再レンダリングされません。

たとえば、家にいる場合'/'や'movies'、ナビゲーション バーを使用して'movies/The%20Dark%20Knight/2008'. しかし、私がオン'movies/The%20Dark%20Knight/2008'の場合、ナビゲーションバーを使用してに移動することはできません'/movies/Taken/2008'。これはAngularが同様のパスの再レンダリングを減らそうとしていることに関係していると思いますが、同じパスタイプに異なる引数がある場合、Angularにビューを変更させるにはどうすればよいですか?

追加情報

• ルートが新しいビューのレンダリングに失敗した場合でも、ブラウザーでパスの URL が変更され、ページの変更が成功した場合と同じ URL になります。
• ナビゲーション コンポーネントに角度のあるナビゲーション イベントがあります。ナビが起動し、ナビエラーがないことを確認できます。キャンセルするかどうかをテストする必要があります。

答え

答えが言うように、私はパラメータを購読する必要がありました。以前、パラメータを取得していたとき、スナップショットを使用していました:

これで、params を直接取得してサブスクライブします。

Angular 2 アプリケーションで機能するリンクを取得できません。

マイページは、ヘッダーとその下のコンテンツの 2 つの部分で構成されています。2 つのパーツは、それぞれのルーター アウトレットによってモデル化されています。リンクをクリックすると、通常、ヘッダーとコンテンツの両方を変更したいと思います。そこで、 を使用して、 routerLinkのように各アウトレットのリンクの場所を定義しようとしました<a [routerLink]="[{ outlets: { primary: '/content', header: '/header' }}]">link</a>。

残念ながら、リンクは機能しません。コンソールでは、ルーターは次のエラーをスローします。

また、リンクが正しく解析されているかどうかも疑問に思っていました。HTML を調べると、リンクは次のようになります。<a ng-reflect-router-link="[object Object]" href="//content(header:/header)">link</a>

私は何が間違っているのだろうか、あなたの助けに感謝します!

セットアップは次のとおりです。

app.module.ts

app.component.ts

app-routing.module.ts

リンク/link.component.ts

header/header.component.ts

content/content.component.ts

Angular のバージョン 5.2.8 を使用しています。