TypeScript - הנתונים של ActivatedRoute ב-Angular מחזירים אובייקט ריק

יש לי מסלול רשום עם כמה נתונים:

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 {
  private routeData;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.routeData = this.route.data.subscribe((data) => {
      console.log(data); // this is returning an empty object {}
    });
  }
}

אבל מסיבות מסוימות data הוא אובייקט ריק.

איך לפתור את הבעיה הזאת?

תשובה #1

עריכה: הבעיה היא שניסיתי לגשת ל-ActivatedRoute מ-Component שנמצא מחוץ ל-<router-outlet>. אז זה נראה כמו שההתנהגות הזו היא המיועדת.

עם זאת, אני עדיין חושב שהתשובה שלי למטה יכולה להיות שימושית לכל מי שמנסה להשיג את אותו הדבר.

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

קבל נתוני נתיב מותאמים אישית עבור רכיב מחוץ ל-<router-outlet> (Angular 8):

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