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

Posted 2023-02-22

【中文标题】Angular6路由器导航到共享相同组件的多个子路由

【英文标题】：Angular6 Router navigate to multiple child routes that share the same component

【发布时间】：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，但是，尝试路由时组件的内容保持不变。

【参考方案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: [...]