Angularのルーティングパスを介してデータを送信します


181

とにかくrouter.navigateを使用してパラメーターとしてデータを送信しますか?つまり、この例のように、ルートにデータパラメータがあることがわかりますが、これを行っても機能しません。

this.router.navigate(["heroes"], {some-data: "othrData"})

some-dataは有効なパラメーターではないためです。どうやってやるの?queryParamsでパラメーターを送信したくありません。


:私はそれが(「英雄」、{「OtherDataの」いくつかのデータ})私たちは$ state.goような何かをすることができましたAngularJS、のように他の方法であるべきだと思う
Motomine

経路で共有データへの3つの簡単な方法- angulartutorial.net/2017/12/...
Prashobh

私のアプローチを使用してくださいnpmjs.com/package/ngx-navigation-with-data私による最後のコメント、誰にとっても最高
Virendra Yadav

回答:


511

これを行うには非常に多くの異なる方法があるため、このトピックについては多くの混乱があります。

以下のスクリーンショットで使用されている適切なタイプは次のとおりです。

private route: ActivatedRoute
private router: Router

1)必要なルーティングパラメータ:

ここに画像の説明を入力してください

2)ルートのオプションパラメータ:

ここに画像の説明を入力してください

3)ルートクエリパラメータ:

ここに画像の説明を入力してください

4)サービスを使用して、ルートパラメータをまったく使用せずにコンポーネント間でデータを渡すことができます。

例については、https//blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/をご覧ください。

私はここにこれのプランカーを持っています:https ://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview


回答ありがとうございます!2)と3)の違いは何ですか?どちらもURLに「?parameter =」を追加することになるためです。4)の例を教えてください。どうすればいいのかわからない。
Motomine 2017

さまざまなURLを表示し、サービスでデータを渡す方法についてブログ投稿とプランカーへのリンクを提供するために、回答を更新しました。上記のように、URLはオプションパラメータとクエリパラメータで異なります。さらに、クエリパラメータはルート全体で保持できます。
DeborahK 2017

5
:私はまた、このすべてのカバーをルーティングする上Pluralsightもちろん持ってapp.pluralsight.com/library/courses/angular-routing/...あなたはより多くの情報に興味があるなら、あなたは無料の週にサインアップすることができます。
DeborahK 2017

3
データは実行中のアプリケーション内でのみ「共有」されます。ユーザーがページを更新すると、アプリケーション全体がサーバーから再読み込みされるため、アプリケーションの以前の状態は保持されません。通常のアプリケーションの観点から考えると、ユーザーが更新すると、アプリケーションを閉じて再度開くようなものです。更新後も状態を保持する必要がある場合は、ローカルストレージやサーバーなどのどこかに保存する必要があります。
DeborahK

2
ちょっとしたヒント:routetypeは ActivatedRouteではなくRouterです。
Arsen Khachaturyan

156

Angular 7.2.0に付属する新しいメソッドがあります

https://angular.io/api/router/NavigationExtras#state

送信:

this.router.navigate(['action-selection'], { state: { example: 'bar' } });

受け取る:

constructor(private router: Router) {
  console.log(this.router.getCurrentNavigation().extras.state.example); // should log out 'bar'
}

ここにいくつかの追加情報を入力できます:

https://github.com/angular/angular/pull/27198

上記のリンクにはこの例が含まれていますが、何が役に立つでしょう:https : //stackblitz.com/edit/angular-bupuzn


11
これは、角度7の新機能を与えられた正しい答えである
ランディ

2
このアプローチでは、ユーザーによるブラウザの更新をどのように処理しますか?その場合、ナビゲーションエキストラのデータは消えてしまうように見えるため、更新時に再度使用することはできません。
tobi_b

1
@tobi_b私はあなたが正しいと思います、リフレッシュした後はそれに到達できません。更新後にそれが必要な場合は、受け入れられた回答のメソッドの方が優れています。
Végerロラーンド

3
そうです、コンストラクターでthis.router.getCurrentNavigation()からのみデータを取得できるのはそのためです。ngOnInit()内など、他の場所で必要な場合は、「history.state」を介してデータにアクセスできます。ドキュメントから:「任意のナビゲーションに渡された状態。この値は、ナビゲーションの実行中にrouter.getCurrentNavigation()から返されたextrasオブジェクトを介してアクセスできます。ナビゲーションが完了すると、この値は場所の履歴にあるhistory.stateに書き込まれます。 .goまたはlocation.replaceStateメソッドが、このルートをアクティブにする前に呼び出されました。」
Végerロラーンド

8
また、ngOnInit()asでextrasオブジェクトをthis.router.getCurrentNavigation().extras
受信

26

angular(7.2 +)の最新バージョンには、NavigationExtrasを使用して追加情報を渡すオプションがあります。

ホームコンポーネント

import {
  Router,
  NavigationExtras
} from '@angular/router';
const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};
this.router.navigate(['newComponent'], navigationExtras);

newComponent

test: string;
constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as {
    transId: string,
    workQueue: boolean,
    services: number,
    code: string
  };
  this.test = "Transaction Key:" + state.transId + "<br /> Configured:" + state.workQueue + "<br /> Services:" + state.services + "<br /> Code: " + state.code;
}

出力

ここに画像の説明を入力してください

これが役立つことを願っています!


1

@ dev-nishあなたのコードはそれらの小さな調整で動作します。作る

const navigationExtras: NavigationExtras = {
  state: {
    transd: 'TRANS001',
    workQueue: false,
    services: 10,
    code: '003'
  }
};

let navigationExtras: NavigationExtras = {
  state: {
    transd: '',
    workQueue: ,
    services: ,
    code: ''
  }
};

次に、フォームの入力の結果としてJSONなどの特定のタイプのデータを具体的に送信する場合は、前に説明したのと同じ方法でデータを送信できます。


0

navigateExtraでは、特定の名前のみを引数として渡すことができます。それ以外の場合は、以下のようなエラーが表示されます。

this.Router.navigate(['componentname'],{cuskey: {customerkey:response.key}});

しかし、それは以下のようないくつかのエラーを示しています:

Argument of type '{ cuskey: { customerkey: any; }; }' is not assignable to parameter of type 'NavigationExtras'.
  Object literal may only specify known properties, and 'cuskey' does not exist in type 'NavigationExt## Heading ##ras'

解決策:次のように記述する必要があります。

this.Router.navigate(['componentname'],{state: {customerkey:response.key}});

-2

これについて私がインターネットで見つけた最高のものはngx-navigation-with-dataです。非常にシンプルで、あるコンポーネントから別のコンポーネントへのデータのナビゲーションに適しています。コンポーネントクラスをインポートして、非常に簡単な方法で使用する必要があります。あなたが家と約コンポーネントを持っていて、データを送信したいとします

ホームコンポーネント

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-home',
 templateUrl: './home.component.html',
 styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor(public navCtrl: NgxNavigationWithDataComponent) { }

 ngOnInit() {
 }

 navigateToABout() {
  this.navCtrl.navigate('about', {name:"virendta"});
 }

}

コンポーネントについて

import { Component, OnInit } from '@angular/core';
import { NgxNavigationWithDataComponent } from 'ngx-navigation-with-data';

@Component({
 selector: 'app-about',
 templateUrl: './about.component.html',
 styleUrls: ['./about.component.css']
})
export class AboutComponent implements OnInit {

 constructor(public navCtrl: NgxNavigationWithDataComponent) {
  console.log(this.navCtrl.get('name')); // it will console Virendra
  console.log(this.navCtrl.data); // it will console whole data object here
 }

 ngOnInit() {
 }

}

クエリについては、https://www.npmjs.com/package/ngx-navigation-with-dataに従ってください。

ヘルプのためにコメントしてください。


パラメータの形式でデータを転送しますか、それともバックグラウンドで転送しますか?
Marium Malik

@MariumMalikわかりませんでした。説明を聞いてください。
Virendra Yadav

はい、@ MariumMalikです
Virendra Yadav

3
あなたは「インターネットで見つけた」というよりは、この著者であるように見えますか?また、同様の機能を実装するAngular 7スレッド(github.com/angular/angular/pull/27198)でスパムしないように求められます
IrishDubGuy
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.