Angular6 Router导航到共享同一组件的多个子路由 [英] Angular6 Router navigate to multiple child routes that share the same component

问题描述

我有多个子组件，它们共享可以正常工作的同一个组件，但是，我无法在页面之间进行路由，因为Angular怀疑该组件已被加载.尝试路由到这些子路由时是否可以重新加载组件?

I have multiple child components that share the same component which works fine, however, I cannot route between the pages as it appears Angular suspects the component is already loaded. Is it possible to reload the component when attempting to route to these child routes?

const ServicesRouting: ModuleWithProviders = RouterModule.forChild([
    {
        path: '',
        component: StructureComponent,
        canActivate: [AuthGuard],
        children: [
            {
                path: 'services',
                canActivate: [AuthGuard],
                component: servicesComponent,
                children: [
                    {
                        path: 'one',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'two',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'three',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    },
                    {
                        path: 'four',
                        canActivate: [AuthGuard],
                        component: servicesComponent,
                    }
                ]
            }
        ]
    }
]);

推荐答案

首先，您必须为每个路线创建一个相同的页面，并使用如下参数:path: 'home/:id'.

You first have to create a same page for each route and use parameters like so : path: 'home/:id' .

虽然它不能解决您的问题. 您必须在那里使用RXJS.例如:

It won't solve your problem though. You have to use RXJS there. For example :

this.route.paramMap .pipe( map((paramMap) => Number.parseInt(paramMap.get('id') || '1', 10)), switchMap((id) => this.myService.getData(id)) ).subscribe((data) => this.data = data);

this.route.paramMap .pipe( map((paramMap) => Number.parseInt(paramMap.get('id') || '1', 10)), switchMap((id) => this.myService.getData(id)) ).subscribe((data) => this.data = data);

this.route.paramMap是您可以订阅的Observable.

this.route.paramMap is an Observable which you can subscribe to.

这篇关于Angular6 Router导航到共享同一组件的多个子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！