Angular6 路由器导航到共享相同组件的多个子路由 [英] 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.管道(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 路由器导航到共享相同组件的多个子路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！