是否有任何方式发送数据作为参数路由器。导航? 我的意思是,像这个例子,你可以看到路由有一个数据参数,但是这样做是不行的:
this.router.navigate(["heroes"], {some-data: "othrData"})
因为some-data不是一个有效参数。我该怎么做呢?我不想用queryParams发送参数。
是否有任何方式发送数据作为参数路由器。导航? 我的意思是,像这个例子,你可以看到路由有一个数据参数,但是这样做是不行的:
this.router.navigate(["heroes"], {some-data: "othrData"})
因为some-data不是一个有效参数。我该怎么做呢?我不想用queryParams发送参数。
当前回答
从Angular 15开始,this.router.getCurrentNavigation()可能会返回null,因为该组件是在导航之后实例化的。
另一种方法是从Location (@angular/common)中访问状态
import { Location } from '@angular/common';
constructor(private location: Location) {
location.getState() // do what you want
}
其他回答
最新版本的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;
}
输出
希望这能有所帮助!
getStateById (stateId) { 返回this.http.get(环境。user_service_url + "/getStateById", {params:{"stateId": stateId}}); }
在这个话题上有很多困惑,因为有很多不同的方法来做到这一点。
以下是在以下截图中使用的适当类型:
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
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
从Angular 15开始,this.router.getCurrentNavigation()可能会返回null,因为该组件是在导航之后实例化的。
另一种方法是从Location (@angular/common)中访问状态
import { Location } from '@angular/common';
constructor(private location: Location) {
location.getState() // do what you want
}