是否有任何方式发送数据作为参数路由器。导航? 我的意思是,像这个例子,你可以看到路由有一个数据参数,但是这样做是不行的:
this.router.navigate(["heroes"], {some-data: "othrData"})
因为some-data不是一个有效参数。我该怎么做呢?我不想用queryParams发送参数。
是否有任何方式发送数据作为参数路由器。导航? 我的意思是,像这个例子,你可以看到路由有一个数据参数,但是这样做是不行的:
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
其他回答
我在网上找到的最好的是ngx-navigation-with-data。 它非常简单,非常适合将数据从一个组件导航到另一个组件。 您只需导入组件类,并以非常简单的方式使用它。 假设您有home和about组件,然后想要发送数据
家组件
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
请在下方评论寻求帮助。
我需要访问CustomRouteReuseStrategy中的数据,由于循环依赖,我不能在那里注入路由器,但你也可以使用Location对象来读取状态。
Send:
this.router.navigate(['action-selection'], { state: { example: 'bar' } });
Receive:
import { Location } from '@angular/common';
constructor(private location: Location) {
console.log(this.location.getState().example); // should log out 'bar'
}
在这个话题上有很多困惑,因为有很多不同的方法来做到这一点。
以下是在以下截图中使用的适当类型:
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
getStateById (stateId) { 返回this.http.get(环境。user_service_url + "/getStateById", {params:{"stateId": stateId}}); }
@dev-nish你的代码只需要稍作调整就能正常工作。 使
const navigationExtras: NavigationExtras = {
state: {
transd: 'TRANS001',
workQueue: false,
services: 10,
code: '003'
}
};
成
let navigationExtras: NavigationExtras = {
state: {
transd: '',
workQueue: ,
services: ,
code: ''
}
};
然后,如果你想特别发送一种类型的数据,例如,JSON作为表单填充的结果,你可以用之前解释的相同方式发送数据。