[解決済み] どのようにしてangular 4のurlからparamを取得するのですか?
2022-11-04 06:09:42
質問
URLからstartdateを取得しようとしています。
URLは次のようなものです。
http://sitename/booking?startdate=28-08-2017
私のコードは以下の通りです。
aap.module.ts
import {...};
@NgModule({
declarations: [
AppComponent, ModalComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule,
ReactiveFormsModule,
RouterModule.forRoot([{
path: '',
component: AppComponent
},
]),
],
providers: [ContactService, AddonService, MainService],
bootstrap: [AppComponent]
})
export class AppModule { }
aap.component.ts
import {...}
import {Router, ActivatedRoute, Params} from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
// subscribe to router event
this.activatedRoute.queryParams.subscribe((params: Params) => {
console.log(params);
});
}
しかし、以下のようなエラーが発生します。
Unhandeled Promise rejection: ベースとなるhrefが設定されていません。APP_BASE_HREF トークンに値を指定するか、ドキュメントにベース要素を追加してください。 を指定するか、ドキュメントに base 要素を追加してください。 ゾーン: ; タスク: Promise.then ; Value: Error: Base hrefが設定されていません。 APP_BASE_HREFトークンに値を与えるか、ドキュメントにベース要素を追加してください。 要素をドキュメントに追加してください。
Angularはどのようにしてbase hrefを知るのですか?
どのように解決するのですか?
更新
この投稿にあるDimitry Grinkoの回答の方が良いと思います。
古い回答
これは、URLからパラメータを取得するトリックを行う必要があります。
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(params => {
let date = params['startdate'];
console.log(date); // Print the parameter to the console.
});
}
ローカル変数dateに 開始日 パラメータを含むようになります。Router と Params モジュールは (クラスのどこかで使用されていなければ) 削除することができます。
関連
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular:*ngClassを使った条件付きクラス
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] Angularでコンポーネントをリフレッシュする方法
-
[解決済み] プロパティ 'X' はプライベートであり、クラス 'xyzComponent' 内でのみアクセス可能です。
-
[解決済み] 簡単なパイプで小数点以下2桁に制限する
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] ngFor を使用して、Typescript Enum を文字列の配列として反復処理するにはどうすればよいですか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】「GET」パラメータから値を取得する(JavaScript)【重複】。
-
[解決済み] Angular 2におけるEventEmitter.next()とEventEmitter.emit()の相違点
-
[解決済み] コンポーネントクラスからテンプレート参照変数にアクセスする
-
[解決済み] パイプ ' ' が見つかりません。
-
[解決済み] angular-cliのビルドでカスタムファイルをインクルードするには?
-
[解決済み] Angular 4+ ngOnDestroy() サービス中 - observableを破壊する
-
[解決済み] 簡単なパイプで小数点以下2桁に制限する
-
[解決済み] angular4 / typescriptでdocument.getElementByIdの置き換え?
-
[解決済み] Angularで、コントロールが作成された後、FormControlにバリデータを追加する方法は?
-
[解決済み] FormGroupとFormArrayの使い分けは?