Angular6路由器导航到共享相同组件的多个子路由答案

【问题标题】：Angular6 Router navigate to multiple child routes that share the same componentAngular6路由器导航到共享相同组件的多个子路由
【发布时间】：2019-04-10 21:54:35
【问题描述】：

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

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,
                    }
                ]
            }
        ]
    }
]);

【问题讨论】：

看起来 AuthGaurd 阻止了它，删除 Gaurd 并检查
如果它们共享相同的组件，我不确定为什么要为每个路由创建不同的页面。你可以使用像path: 'home/:id'这样的参数。
@GreatHawkeye 你有一个非常公平的观点（感觉像个白痴）。我会做出相应的更改并回复您。
@GreatHawkeye 我已经更新了路由以包含 /:service，但是，尝试路由时组件的内容保持不变。

标签： angular typescript angular6 angular-routing

【解决方案1】：

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

但它不会解决你的问题。你必须在那里使用 RXJS。例如：

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。

【讨论】：

【解决方案2】：

您可以使用runGuardsAndResolvers。
例如试试这个：

{
        path: '',
        component: StructureComponent,
        canActivate: [AuthGuard],
        runGuardsAndResolvers: 'always'
        children: [...]
}

【讨论】：