[解決済み] Angular 2でurlからクエリパラメータを取得する方法は?
2022-04-15 18:42:05
質問
angular2.0.0-beta.7を使用していますが、コンポーネントをロードする際、以下のようなパスでロードされます。
/path?query=value1
にリダイレクトされます。
/path
なぜGETパラメータが削除されたのですか?パラメータを保持するにはどうしたらよいですか?
ルーターにエラーが発生しました。というようなメインルートがあれば
@RouteConfig([
{
path: '/todos/...',
name: 'TodoMain',
component: TodoMainComponent
}
])
というような我が子ルートに
@RouteConfig([
{ path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
{ path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])
の場合、TodoListComponentでパラメータを取得することができません。
params("/my/path;param1=value1;param2=value2")
しかし、私はクラシックが欲しい。
query params("/my/path?param1=value1¶m2=value2")
解決方法は?
のインスタンスを注入することで
ActivatedRoute
を含む様々なobservableにサブスクライブすることができます。
queryParams
と
params
観測可能である。
import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';
@Component({...})
export class MyComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
// Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
this.activatedRoute.queryParams.subscribe(params => {
const userId = params['userId'];
console.log(userId);
});
}
}
配信停止に関する注意事項
Reto と @codef0rmer の指摘はもっともなもので、公式ドキュメントにあるように
unsubscribe()
コンポーネント内の
onDestroy()
メソッドはこの例では不要です。これは私のコードサンプルから削除されました。(青い警告ボックスの
これ
チュートリアル)
関連
-
[解決済み】「TS2532: Object is possibly 'undefined'」というエラーを解決するにはどうしたらいいですか?
-
[解決済み] プロパティ 'values' はタイプ 'ObjectConstructor' に存在しません。
-
[解決済み] TypeScriptの円形型参照
-
[解決済み] Typescriptでオブジェクトのプロパティを結合する方法は?
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] クラス定数を実装するには?
-
[解決済み] Angular 2の "select "で新しい選択範囲を取得するにはどうすればよいですか?
-
[解決済み】ランタイムにオブジェクトのクラス名を取得する
-
[解決済み】AngularでHTTPリクエストにURL引数(クエリ文字列)を渡すには?
-
[解決済み】タイプライター。TS7006: パラメータ 'xxx' は暗黙のうちに 'any' 型を持つ。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
ts 学習日記1 AssertionError [ERR_ASSERTION]: タスク関数を指定する必要があります
-
[解決済み] TypeScriptで、「extends keyof」と「in keyof」はどういう意味ですか?
-
[解決済み] TypeScriptでfetchを使う方法
-
[解決済み] Jestで関数をモックする方法
-
[解決済み] クラス定数を実装するには?
-
[解決済み] Typescript は ?演算子をサポートしていますか?(そして、それは何と呼ばれているのでしょうか?)
-
[解決済み] TypeScriptのクラス型チェック
-
[解決済み】オブジェクトの配列を定義するにはどうしたらいいですか?
-
[解決済み】WebStorm/PhpStormのダブルクォートでTypeScriptの自動インポートを行う。
-
[解決済み】ルーターリンクでクエリパラメータを渡す方法