parammap - Los datos de Angular ActivatedRoute devuelven un objeto vacío

import activatedroute from ''@ angular router '';

Question

Tengo una ruta registrada con algunos datos:

const routes: Routes = 
[
    {path: ''my-route'', data: { title: ''MyTitle'' }, component: MyComponent},
];

y estoy tratando de acceder a los datos de la ruta usando 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 {}
    });
  }
}

pero por alguna razón los data son un objeto vacío.

¿Cómo resolver este problema?

Answer 1

Edición: el problema es que estaba intentando acceder a ActivatedRoute desde un componente que está fuera de <router-outlet> . Así que parece que este es el comportamiento previsto.

Sin embargo, sigo pensando que mi respuesta a continuación puede ser útil para cualquier persona que esté tratando de lograr lo mismo.

Encontré una solución alternativa en GitHub (gracias manklu ) que usé para lograr lo que necesitaba:

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;
      }
    });
  }
}

de esta manera this.routeData mantendrá los datos de ruta que necesitaba (en mi caso, el title la página).

Answer 2

A continuación debe trabajar:

constructor(private route: ActivatedRoute) {}

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

Answer 3

No sé la versión hablada, pero a partir de Angular 6 , esto funcionó para mí:

(Por supuesto gracias a 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;
        }
      }
    });
  }