Angular 组件中的角度4布线组件

我有一个

仪表板组件

，如果路由器位于

/client

，则正在加载该组件，而

/product

也有此组件：

export const routes: Routes =
[
    { path: '', component: HomeComponent },
    { path: 'client', component: DashboardComponent },
    { path: 'product', component: DashboardComponent }

];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class RoutesModule { }

然后像这样加载不同的组件（在

dashboard.component.ts

）：

然后在

dashboard.component.html

中，我执行以下操作：

<app-client *ngIf="isClient"></app-client>
<app-product *ngIf="isProduct"></app-product>

---

我觉得这不是解决问题的方法，但我找不到一个很好的解释来说明如何实现这一点。如果您转到例如

/dashboard/client

它将

客户端组件加载到
DashboardComponent
内部，对于
ProductComponent
您可以使用子路由器插座来实现这一点

// routing.module.ts
export const routes: Routes = [
    { path: '', component: HomeComponent },
    {
        path: 'dashboard',
        component: DashboardComponent,
        children: [
            {
                path: 'client',
                component: ClientComponent
            },
            {
                path: 'product',
                component: ProductComponent
            }
        ]
    }
]

<div>
    dashboard component
    <router-outlet></router-outlet>
</div>

并将子路由器出口添加到
仪表板组件中

<div>
    dashboard component
    <router-outlet></router-outlet>
</div>


仪表板组件

因此，当用户转到
/dashboard/client
时，
仪表板组件
加载到顶级路由器出口，而
客户端组件
加载到子路由器出口（在
仪表板组件
内部）。下面是一个演示
@MeesKluivers作为旁注，我会在
仪表板组件
子项下添加另一个路由定义：[{path:''，pathMatch:'full'，redirectTo:'client'}]
因此当用户点击
/dashboard
时，它们会被重定向到
/dashboard/client
。我已经更新了stackblitzAh，我所做的是添加路径：''，然后加载ClientComponent。谢谢