ActivatedSnapshot创建顺序

Question

以以下路由模块为例：

const routes: Routes = [
  {
    path: 'first-admin',
    loadChildren: 'app/domain/first/first-admin/first-admin.module#FirstAdminModule'
    data: {module: 'first'}
  },
  {
    path: 'second-admin',
    loadChildren: 'app/domain/second/second-admin/second-admin.module#SecondAdminModule'
    data: {module: 'second'}
  }
}

用户在我的应用程序组件中请求/ first-admin / **，其中**是子路由之一。

在应用程序组件中，我想提取与ActivatedRoute关联的数据，但似乎无法弄清楚，也许丢失了一些东西。我注意到，当我将快照转储到控制台时，它最初有0个孩子，然后有1个孩子，我猜想在加载孩子之后。

应用程序组件包含路由器出口。据我了解，当应用程序组件加载ActivatedRoute和Snapshot时，它与第一个相同吗？然后，当将可路由的子组件加载到子路由中时，它将创建一个新的快照，该快照将是第一个子组件，而当前ActivatedSnapshot将反映当前状态。

问题-在我的应用程序组件中，我尝试订阅了ActivatedRoute中可观察到的数据，但在订阅中仅得到一个空数据对象。在我的应用程序组件中，如何获取数据中的“第一个”模块名称？看来此数据已附加到子路由创建的快照中。

在我的应用程序组件的ngOnInit中添加了以下三行：

console.log('looking at the activatedroute snapshot', 
     this.activatedRoute.snapshot);

console.log('looking at created copy of activated route', 
    {...this.activatedRoute});

console.log('looking at the activated route', this.activatedRoute);

此处的图片：

Answer 1

您在路由定义的data属性中定义的任何对象都是静态的，并且只能从快照中访问。 data的静态性质意味着不需要观察/订阅，因为data不会改变。

您可以从Angular提供的ActivatedRoute服务访问数据。

下面是如何访问路线数据的示例：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    selector: 'app-component',
    templateUrl: './component.html'
})
export class Component implements OnInit {
    module = '';

    constructor(
        private route: ActivatedRoute
    ) { }

    ngOnInit() {
        this.module = this.route.snapshot.data['module'];

        console.log('snap');
        console.log(this.route.snapshot);
        console.log(this.route.snapshot.data['module']);
    }
}

我已经尝试像您一样通过延迟加载的路由访问路由数据，并且按预期工作。见下文。