Angular ActivatedRoute data retourne un objet vide

Question

J'ai un itinéraire enregistré avec quelques données:

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

et j'essaie d'accéder aux données de la route en utilisant 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 {}
    });
  }
}
 

mais pour certaines raisons, data est un objet vide.

Comment résoudre ce problème?

Answer 1

Edit: le problème est que j'essayais d'accéder à la ActivatedRoute à partir d'un Composant qui est à l'extérieur de l' <router-outlet>. Donc on dirait que c'est le but de comportement.

Cependant, je crois que ma réponse ci-dessous peut être utile à toute personne qui est en train d'essayer de faire la même chose.

---

J'ai trouvé une solution de contournement sur GitHub (merci manklu) que j'ai utilisé pour réaliser ce dont j'avais besoin:

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

faire de cette façon, this.routeData tiendra la route de données que j'ai besoin (dans mon cas, la page d' title).

Answer 2

Je ne connais pas la version parlée, mais à partir de Angular 6 , cela a fonctionné pour moi:

(Bien sûr, merci à 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;
        }
      }
    });
  }
 

Answer 3

Ci-dessous devrait fonctionner:

 constructor(private route: ActivatedRoute) {}

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