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

Posted 2023-02-23

【中文标题】手动传递的 Angular 路由变量在组件中未定义

【英文标题】：Manually-passed Angular route variable gets undefined in component

【发布时间】：2018-12-19 20:13:40

【问题描述】：

在我的 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 变量。当我手动更改路线时，变量被定义，我在警报中看到它。但是，该变量立即再次变得未定义，我通过尝试在模板中显示该变量来证明这一点。您知道为什么会导致此变量未定义吗？

【问题讨论】：

手动更改路线是什么意思？那条路线是什么，你改成什么路线？当你再次重新加载时，显示的 url 是什么？

我必须在浏览器的地址栏中手动更改路线。例如。将/campaigns/1/dasbhoard 更改为/campaigns/2/dashboard。如果我重新加载，URL 保持不变。无论如何，我现在意识到当我重新加载一个页面时，它不能很好地与 Angular 的路由器一起工作。另一方面，如果我在链接之间单击，使用 Angular 的路由器，则变量保持定义。所以我猜我需要强制我的页面在页面加载时使用 Angular 的路由器，如果这有意义的话......

reload 和 click between the links 都将由 Angular 的路由器处理。我不明白这是怎么回事。

嗯，这很奇怪。也许我没有正确描述它。我所知道的是，当我用浏览器重新加载时它不起作用。

【参考方案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;
);

【讨论】：

这解决了它。比我的解决方案容易得多。谢谢！