无论如何,使用router.navigate将数据作为参数发送?我的意思是,就像这个示例一样,您可以看到路线具有data参数,但是这样做是行不通的:
this.router.navigate(["heroes"], {some-data: "othrData"})
因为some-data不是有效的参数。我怎样才能做到这一点?我不想使用queryParams发送参数。
无论如何,使用router.navigate将数据作为参数发送?我的意思是,就像这个示例一样,您可以看到路线具有data参数,但是这样做是行不通的:
this.router.navigate(["heroes"], {some-data: "othrData"})
因为some-data不是有效的参数。我怎样才能做到这一点?我不想使用queryParams发送参数。
Answers:
这个主题有很多困惑,因为有很多不同的方法可以做到这一点。
以下是屏幕截图中使用的适当类型:
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()
为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)作为表单填充的结果,则可以按照前面说明的相同方式发送数据。
在navigationExtra中,我们只能传递一些特定的名称作为参数,否则将显示错误,如下所示:对于Ex-在这里,我想在路由器导航中传递客户密钥,并且像这样传递-
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
评论下来以寻求帮助。