手动传递的 Angular 路由变量在组件中未定义

Question

在我的 Angular 组件中，我试图获取一个从路由中手动传递的变量。我遵循了本教程：https://hassantariqblog.wordpress.com/2017/02/26/angular2-retrieve-data-property-from-angular2-routes/。首先，在我的路由文件中，我向我的路由对象添加了一个数据属性，我在其中定义了我想要传递的内容：

{
    path: ':id/dashboard/:sectionIndex',
    component: CampaignDashboardComponent,
    data: {
        section: 'dashboard' // this is what I need to retrieve in the component
    }
},

这是我的组件：

import { Component, Input, OnInit } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';

@Component({
    selector: 'campaign-menu',
    templateUrl: './campaignMenu.component.html',
})
export class CampaignMenu implements OnInit {

    public sectionKey: string;

    constructor(
        private router: Router,
    ) {}

    ngOnInit() {
        this.router.events
            .filter((event: any) => event instanceof NavigationEnd)
            .subscribe(() => {
                var root = this.router.routerState.snapshot.root;
                while (root) {
                    if (root.children && root.children.length) {
                        root = root.children[0];
                    } else if (root.data && root.data["section"]) {
                        this.sectionKey = root.data["section"];
                        alert(this.sectionKey);
                        return;
                    } else {
                        return;
                    }
                }
            });
    }
}

为了完成这项工作，我必须在浏览器的地址栏中手动更改路线。如果我只是重新加载页面，则不会定义 sectionKey 变量。当我手动更改路线时，变量被定义，我在警报中看到它。但是，该变量立即再次变得未定义，我通过尝试在模板中显示该变量来证明这一点。您知道为什么会导致此变量未定义吗？

Answer 1

我认为问题在于您如何尝试访问控制器中的 Route 数据。而不是使用Router，您应该使用ActivatedRoute，然后您可以选择订阅.data（如果您需要在路由加载后对更改做出反应），或者直接通过.snapshot.data.data_property访问它。例如：

首先，将 ActivatedRoute 注入到你的控制器中：

constructor(
    private route: ActivatedRoute,
    ...
)

然后，您可以通过两种方式访问​​它：

快照

let dataVal = this.route.snapshot.data.data_property;

订阅路线数据

this.route.data.subscribe((data: any) => {
    let dataVal = data.data_property;
});