web-dev-qa-db-ja.com

ActivatedRouteをAngular 5で使用するには？

私はこの投稿とまったく同じことをしようとしています： Angular 4 get queryString

私はAngular 5.2.5。

ActivatedRouteは、ユーザーが最初にWebサイトにアクセスしたときに、URLからクエリ文字列値を取得するために使用するもののようです。ただし、ActivatedRouteを使用できるようにするためにインポートする必要があるものを把握することはできません。

App.module.tsファイルに追加する必要があるものと、ActivatedRouteを使用しようとしているcomponent.tsファイルを誰かが正確に指定できますか？

この投稿では、@ NgModuleのimports配列にルーティングを追加することを指定しています： ActivatedRouteのプロバイダーなし-Angular 2 RC5 。 .tsファイル：ActivatedRouteを使用するには、app.routing.tsファイルを作成する必要がありますか？

angular5query-stringangular-activatedroute
6
Mark Nugent

ActivatedRouteコンセントにロードされたコンポーネントに関連付けられたルートに関する情報が含まれます。 Id、フラグ、状態などのルートを使用して、_one component_から_another component_にデータを渡すためにも使用できます。

_http://localhost:4200/quiz/edit_quiz/032
_

_032_は、編集したいクイズのidである。

コンポーネントでこのIDを取得し（私の場合はedit_quiz.compontent.ts）、Activated Routeを使用して使用します。

ステップ1： RouterモジュールからActivatedRouteをインポートします。

_import { ActivatedRoute } from '@angular/router';
_

ステップ2：コンストラクタにActivatedRouteを挿入します。

_  constructor(private activatedRoute: ActivatedRoute) { }
_

ステップ3：ngOnInit(){}のquizIdという名前のローカル変数のIDを取得します

_   ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }
_

これで、使用する_edit_quiz.component.ts_にidができました。

3
Mr. Droid

アルンが提案した2つの変更を加えました。次に、「ActivatedRouteのプロバイダーがありません」エラーを修正するために、以下に示す変更を行いました。

1）app.module.tsに次の行を追加しました：

import { RouterModule } from '@angular/router';

2）app.module.tsの@NgModuleのインポート配列にこの行を追加しました：

RouterModule.forRoot([])

この記事は私に修正を与えました： 角度エラー：ActivatedRouteのプロバイダーがありません

これでコンパイルされます。やった！

2
Mark Nugent

次のように@ angular/routerからActivatedRouteをインポートする必要があります

import { ActivatedRoute } from '@angular/router';

次に、app.module.tsの@NgModuleのインポート配列に次の行を追加します。

imports:[
        ........,
        RouterModule.forRoot()
],

次のようにどこでも使用できます：

constructor(private route: ActivatedRoute) {
     console.log(route.snapshot.queryParamMap); // this
}
// or
queryString : string;
getQueryString(){
   this.queryString = this.route.queryParamMap.get('myQueryParam');
}

いいえ。アプリ内のページを移動する必要がない場合、app.routing.tsは必要ありません。

1
Arun Amatya

ActivatedRoute

私は会話に遅れていますが、同じ問題に遭遇する将来のプログラマーのために以下がうまくいくことを願っています。

activatedRouteをインポートします

import { ActivatedRoute } from '@angular/router';

依存性注入を注入する

constructor(
    private route: ActivatedRoute,
  ) { }

リンクからIDを取得するには、次を使用できます

  ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}
0
Mickey Mouse