Угловые данные 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);
}