Question

假设我有以下路线：

[
    {
        path: 'view',
        children: [
            {

                path: ':id',
                component: CustomerViewComponent,
                resolve: {
                    customerViewData: CustomerResolve,
                    edit: ViewRouteResolve // Returns false
                },
                data: {
                    other: false
                },
                children: [
                    {
                        path: 'edit',
                        resolve: {
                            edit: EditRouteResolve // Returns true
                        },
                        data: {
                            other: true
                        }
                    },
                    {
                        path: '',
                        data: {
                            other: false
                        }
                    }
                ]
            }
        ]
    },
    { path: '', component: CustomerListComponent }
]

我想将CustomerViewComponent用于/ view /和/ view / 1 / edit

问题是我无法在组件中捕获此数据更改。我尝试使用resolve或data，我无法抓住任何变化......

此代码不会按预期触发：

this.route.data.subscribe(m => {
    debugger; // Triggers only once the view loads, then never again
});

// This triggers quite often, but the data is always stale.
this.router.events.subscribe(m => {
    console.log(this.route.snapshot.data['edit']);
    console.log(this.route.snapshot.data['other']);
    debugger;
});

这可能是个错误吗？我唯一的解决方法是查看事件NavigationEnd并分析.url字符串属性......

Answer 1

请尝试使用ActivatedRoute

中的@angular/router

this.activatedRoute.params.subscribe(params => {
    console.log(params['edit']);
    console.log(params['other']);
});

Answer 2

在监听router.events时，订阅回调将获得几种不同类型的事件，每个路由都会发生多个变化。 ActivationStart是保存路由data的路由。以下内容对我有帮助：

this.router.events.subscribe(event => {
  if (event instanceof ActivationStart) {
    let data = event.snapshot.data;
    this.titleService.setTitle(data['title'] || '_your_default_title_');
  }
})

Answer 3

我将在您的问题的第二部分发表评论：

这经常触发，但是数据总是过时的

如果要使用路由事件，则可以收听these events中的任何一个。但是在您的特定情况下，您仅对NavigationEnd感兴趣。您可以通过使用pipe和filter运算符过滤可观察到的事件中的发射值来解决此问题，从而使观察者仅在NavigationEnd上运行：

this.router.events.pipe(
  filter(event instanceof NavigationEnd),
).subscribe(event => {
  //... do something on navigation end...
});

由于您仍在观察者中使用this.route.snapshot.data，因此您的数据将不会更改，或者用“陈旧的”字眼表示（无论事件如何），它将始终引用相同的静态数据，而当{ {1}}首先被调用。
由于即使更改路线后组件也相同，所以该组件不会被销毁和重新创建，因此ngOnInit将不会再次调用。

这可以通过使用ngOnInit数据ActivatedRoute而不是route.data来解决。您将需要订阅，或者在事件解决方案中，可以使用route.snapshot.data运算符：

mergeMap

但是，由于您实际上是在组件中，因此不需要就不需要使用任何事件，因此可观察到的this.router.events.pipe( filter(event instanceof NavigationEnd), mergeMap(this.route.data), ).subscribe(data => { //...do something with your data... });实例中的数据将在成功路由时自动重新发送最新值导航。因此，我建议您或多或少地使用@DanielKucal的答案，该答案已经建议使用主动路线，这是正确的方法。只需将ActivatedRoute从他的答案更改为params，您就会获得最新数据：

data

根据路线导航订阅Angular 2中的数据更改

3 个答案: