TypeScript - Angular ActivatedRoute-Daten geben ein leeres Objekt zurück

Ich habe eine Route mit einigen Daten registriert:

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

und ich versuche, auf die Daten der Route mit ActivatedRoute zuzugreifen:

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

aber aus bestimmten Gründen ist data ein leeres Objekt.

Wie löst man dieses Problem?

Antwort #1

Bearbeiten: Das Problem ist, dass ich versucht habe, auf die ActivatedRoute von einer Komponente zuzugreifen, die außerhalb des <router-outlet> liegt. Es scheint also, dass dies das beabsichtigte Verhalten ist.

Ich denke jedoch immer noch, dass meine Antwort unten für jeden nützlich sein kann, der versucht, dasselbe zu erreichen.

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

Wenn man es auf diese Weise macht, wird this.routeData die Routendaten enthalten, die ich benötigte (in meinem Fall den Seitentitel title).

Antwort #2

Routenbenutzerdaten für eine Komponente außerhalb von <router-outlet> (Angular 8) abrufen:

constructor(private router: Router) {}
    
ngOnInit() {
    this.router.events.subscribe(data => {
      if (data instanceof ActivationStart) {
        console.log(`Custom data`, data.snapshot.data);
      }
    });
  }