1. ホーム
  2. angular

[解決済み] どのようにして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 モジュールは (クラスのどこかで使用されていなければ) 削除することができます。