Angular ActivatedRoute data возвращает пустой объект

у меня есть маршрут, зарегистрированный с некоторыми данными:

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 - это пустой объект.

как решить эту проблему?

12
angular angular-routing

3 ответов

Edit: проблема в том, что я пытался получить доступ к 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).

19

Я не знаю версию, но с Угловое 6, это сработало для меня:

(конечно, благодаря 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;
        }
      }
    });
  }
0

ниже должно работать:

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.data);
}
-2