Угловые данные ActivatedRoute возвращают пустой объект
У меня есть маршрут, зарегистрированный с некоторыми данными:
const routes: Routes =
[
{path: 'my-route', data: { title: 'MyTitle' }, component: MyComponent},
];
и я пытаюсь получить доступ к данным маршрута с помощью ActivatedRoute
:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({...})
export class MyComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
public ngOnInit() {
this.routeData = this.route.data.subscribe((data) => {
console.log(data); // this is returning an empty object {}
});
}
}
но по некоторым причинам data
являются пустым объектом.
Как решить эту проблему?
Ответы
Ответ 1
Изменение: проблема в том, что я пытался получить доступ к ActivatedRoute из Компонента, который находится за пределами <router-outlet>
. Таким образом, похоже, что это намеченное поведение.
Однако я все же считаю, что мой ответ ниже может быть полезен для всех, кто пытается добиться того же.
Я нашел обходное решение для GitHub (спасибо manklu), которое я использовал для того, чтобы выполнить то, что мне нужно: 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;
}
});
}
}
делая таким образом this.routeData
будет содержать данные о маршруте, что мне нужно (в моем случае страница title
).
Ответ 2
Я не знаю версию, но, начиная с Angular 6, это сработало для меня:
(Ofcourse благодаря 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;
}
}
});
}
Ответ 3
Ниже следует работать:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.snapshot.data);
}