[英]Angular ActivatedRoute data returns an empty object
I have a route registered with some data:我有一条路线注册了一些数据:
const routes: Routes =
[
{path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];
and I'm trying to access to the route's data using ActivatedRoute
:我正在尝试使用
ActivatedRoute
访问路线数据:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({...})
export class MyComponent implements OnInit {
private routeData;
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.routeData = this.route.data.subscribe((data) => {
console.log(data); // this is returning an empty object {}
});
}
}
but for some reasons data
is an empty object.但由于某些原因,
data
为空 object。
How to solve this problem?如何解决这个问题呢?
<router-outlet>
.<router-outlet>
之外的组件访问 ActivatedRoute。 So it looks like that this is the intended behaviour. However I still think that my answer below can be useful to anyone who is trying to accomplish the same thing.但是,我仍然认为我下面的回答对任何试图完成同样事情的人都有用。
import { Component, OnInit } from '@angular/core'; import { Router, RoutesRecognized } from '@angular/router'; @Component({...}) export class MyComponent implements OnInit { private routeData; constructor(private router: Router) { } ngOnInit() { this.router.events.subscribe((data) => { if (data instanceof RoutesRecognized) { this.routeData = data.state.root.firstChild.data; } }); } }
doing this way this.routeData
will hold the route data that I needed (in my case the page title
).这样做
this.routeData
将保存我需要的路线数据(在我的例子中是页面title
)。
I Don't know the version spoken, but as of Angular 6 , this worked for me:我不知道所说的版本,但从Angular 6 开始,这对我有用:
(Ofcourse thanks to shinDath) (当然感谢 shinDath)
routeData;
ngOnInit() {
//child route param doesnt go up to parent route params.
this.router.events.subscribe((val) => {
if (val instanceof ActivationEnd) {
if(!$.isEmptyObject(val.snapshot.params)){
this.routeData = val.snapshot.params;
}
}
});
}
Get route custom data for component outside <router-outlet> ( Angular 8 ):为<router-outlet> ( Angular 8 ) 之外的组件获取路由自定义数据:
constructor(private router: Router) {} ngOnInit() { this.router.events.subscribe(data => { if (data instanceof ActivationStart) { console.log(`Custom data`, data.snapshot.data); } }); }
This is part of my code (NOTE: I'm using Angular 8 ):这是我的代码的一部分(注意:我使用的是Angular 8 ):
constructor(private _router: Router, private _route: ActivatedRoute) {}
ngOnInit() {
...
this.listenRouting();
}
listenRouting() {
this._router.events.subscribe((router: any) => {
routerUrl = router.url;
if (routerUrl && typeof routerUrl === 'string') {
routerList = routerUrl.slice(1).split('/');
console.log("data.breadcrumbs", this._route.snapshot.routeConfig.children.find(child => child.path === routerList[routerList.length - 1]).data.breadcrumbs);
...
}
});
}
So data is "hiding" under ActivatedRoute.snapshot.routeConfig.children Array.所以数据“隐藏”在 ActivatedRoute.snapshot.routeConfig.children Array 下。 Each child contains, among other things, data .
每个孩子都包含数据等。 In my case data is configured in routing.module, eg:
在我的情况下,数据是在routing.module中配置的,例如:
const routes: Routes = [
{ path: "facility-datas",
component: FacilityTerminal,
data: {
breadcrumbs: "b ft"
}
},
...
];
Answer from Angular contributor, link来自 Angular 贡献者的回答, 链接
this.router.events.pipe(
filter((e) => e instanceof NavigationEnd),
map(() => {
let route = this.activatedRoute;
while (route.firstChild) {
route = route.firstChild;
}
return route;
}),
filter((route) => route.outlet === 'primary'),
mergeMap((route) => route.data),
tap(console.log)
);
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
) {}
import { AfterViewInit, Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss']
})
export class UsersComponent implements AfterViewInit {
paramId: string;
constructor(private activatedRoute: ActivatedRoute) {}
ngAfterViewInit(): void {
this.paramId = this.activatedRoute.snapshot.params.id;
console.log('paramId =', this.paramId);
}
}
Below should work:下面应该工作:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.snapshot.data);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.