とにかくrouter.navigateを使用してパラメーターとしてデータを送信しますか?つまり、この例のように、ルートにデータパラメータがあることがわかりますが、これを行っても機能しません。
this.router.navigate(["heroes"], {some-data: "othrData"})
some-dataは有効なパラメーターではないためです。どうやってやるの?queryParamsでパラメーターを送信したくありません。
とにかくrouter.navigateを使用してパラメーターとしてデータを送信しますか?つまり、この例のように、ルートにデータパラメータがあることがわかりますが、これを行っても機能しません。
this.router.navigate(["heroes"], {some-data: "othrData"})
some-dataは有効なパラメーターではないためです。どうやってやるの?queryParamsでパラメーターを送信したくありません。
回答:
これを行うには非常に多くの異なる方法があるため、このトピックについては多くの混乱があります。
以下のスクリーンショットで使用されている適切なタイプは次のとおりです。
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
route
typeは ActivatedRoute
ではなくRouter
です。
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
ngOnInit()
asでextrasオブジェクトをthis.router.getCurrentNavigation().extras
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;
}
出力
これが役立つことを願っています!
@ dev-nishあなたのコードはそれらの小さな調整で動作します。作る
const navigationExtras: NavigationExtras = {
state: {
transd: 'TRANS001',
workQueue: false,
services: 10,
code: '003'
}
};
に
let navigationExtras: NavigationExtras = {
state: {
transd: '',
workQueue: ,
services: ,
code: ''
}
};
次に、フォームの入力の結果としてJSONなどの特定のタイプのデータを具体的に送信する場合は、前に説明したのと同じ方法でデータを送信できます。
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}});
これについて私がインターネットで見つけた最高のものは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に従ってください。
ヘルプのためにコメントしてください。