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/
这里有一个此示例的 plunker:https://plnkr.co/edit/KT4JLmpcwGBM2xdZQeI9?p=preview
route
类型应该是 ActivatedRoute
,而不是 Router
。 - Arsen KhachaturyanAngular 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
this.router.getCurrentNavigation()
获取数据。
如果你需要在其他地方使用,比如在ngOnInit()
内部,你可以通过"history.state"访问数据。
根据文档说明:"传递给任何导航的状态。在导航执行时,此值将通过从router.getCurrentNavigation()返回的extras对象访问。一旦导航完成,当调用location.go或location.replaceState方法以激活此路由之前,此值将写入history.state。" - Véger LórándngOnInit()
中尝试接收额外的对象,如 this.router.getCurrentNavigation().extras
。 - hastrb最新版本的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);
新组件
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;
}
输出
希望这可以帮助到你!
我需要访问CustomRouteReuseStrategy
中的数据,但由于循环依赖关系,我无法在那里注入Router
,但是你可以使用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'
}
state
作为绑定输入提供给与routerLink
相同的元素。例如:<button [routerLink]="['action-selection']" [state]="{ example: 'bar' }"> 带有状态导航 </button>
- Aaron Jthis.router.getCurrentNavigation()
可能会返回 null,因为组件在导航之后实例化。Location
(来自 @angular/common
)中访问状态。 import { Location } from '@angular/common';
constructor(private location: Location) {
location.getState() // do what you want
}
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}});
const navigationExtras: NavigationExtras = {
state: {
transd: 'TRANS001',
workQueue: false,
services: 10,
code: '003'
}
};
转换为
let navigationExtras: NavigationExtras = {
state: {
transd: '',
workQueue: ,
services: ,
code: ''
}
};
constructor(
private router: Router,
private activeRoute: ActivatedRoute
) {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
takeUntil(this.unsubscribe$)
)
.subscribe((event) => {
const navigation = this.router.getCurrentNavigation();
if (navigation && navigation.extras.state) {
console.log(navigation.extras.state);
}
});
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
this.router.events
属性表示一个可观察对象,用于发出与路由导航相关的事件。
pipe方法允许您将多个操作符链接到可观察对象上。
在这种情况下,filter操作符用于只允许NavigationEnd
事件通过。这确保了只有在导航结束时才执行subscribe回调中的代码。
takeUntil操作符用于在this.unsubscribe$
主题发出值时完成可观察对象。这样做是为了在组件销毁时清理订阅。
最后,在subscribe回调中,使用this.router.getCurrentNavigation()
获取当前导航状态。如果有可用的导航状态,并且在extras对象中有一个state属性,则将该状态记录到控制台。
NB:在ngOnDestroy
方法中,调用this.unsubscribe$.next()
方法来发出一个值,并完成this.unsubscribe$
主题,进而完成takeUntil
操作符并取消订阅路由事件。
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
take(1) // Only take the first event
)
.subscribe((event) => {
const navigation = this.router.getCurrentNavigation();
if (navigation && navigation.extras.state) {
console.log(navigation.extras.state);
}
});
getStateById(stateId) {
return this.http.get<any>(environment.user_service_url + "/getStateById",
{params:{"stateId": stateId}});
}
主页组件
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。
评论区留言以寻求帮助。