問題タブ [angular-router-params]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票する
1 に答える
141 参照

angular - Angular 12 ルーティングは、URL に「%2F」、「%3F」などの UTF-8 文字を表示し、どのルートにも一致しないことを示します。URL セグメント エラー

ログイン後にホームページを表示する必要がある Angular アプリがあります。アプリが正しくログインすると、URL バーに表示される URL に「!」、「%2F」、「%3F」などのUTF-8 文字が含まれ、リロード時にエラーが表示されるError: Cannot match any routes. URL Segment: '!'

app-routing.module.ts

ルートへのナビゲートには、次の関数が使用されます

ナビゲーション方法

これで、アプリケーションがログイン後に新しいルートに移動すると、ブラウザの URL バーに次のような URL が表示されます

http://localhost:4200/#!#%2Fhome%3Fguid=c217-21f6-189f-8b69-a1a6&screenId=3b3f2275-0ad4-48d6-bd76-8270cb9b9807

ブラウザで上記の URL を使用して、ページをリロードしようとすると、次のエラーが表示され、ログイン ページにリダイレクトされます

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

Angular Version used: 12.2.9

これはAngular 12の問題でしょうか、それともここで本当に間違ったことをしていますか?

0 投票する
1 に答える
80 参照

angular - ルート クエリ パラメーターは、Angular での最初のレンダリングで空です

angular URLのクエリパラメーターに基づいてアクションを決定するシナリオがあります。

たとえば、URL が である場合localhost:4200/token=abcはいくつかのタスクを実行する必要があり、URL が である場合は別のlocalhost:4200ことを行う必要があります。このロジックをngOnInit()ofに追加しましたapp component。問題は、初めてコンポーネントをレンダリングするときにクエリ パラメータが空であり、params 値が入力されるまでに時間がかかることです。

コード:

問題は、params が最初は空で、else状態になることです。またその後に行きifます。出力は次のようなものです

ルートがパラメーターで適切に初期化されているかどうかを確認してから続行するにはどうすればよいですか?

PS: Next.js で同様のことを見つけましたが、Angular でこれを行うにはどうすればよいですか?