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 من مكوّن يكون خارج <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);
      }
    });
  }