组件中的Angular 4路由组件

Question

如果路由器位于/client 和/product 相同，我有一个正在加载的DashboardComponent：

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）加载不同的组件：

this.router.events.subscribe(path => {

    if (this.router.url == "/client") {
        this.isClient = true;
    }

    if (this.router.url != "/client") {
        this.isClient = false;
    }
    if (this.router.url == "/product") {
        this.isProduct = true;
    }

    if (this.router.url != "/product") {
        this.isProduct = false;
    }

});

然后在dashboard.component.html我做：

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

我觉得这不是这样做的方法，但如果你去例如，我找不到一个很好的解释来说明如何实现它。 /dashboard/client 它将 ClientComponent 加载到 DashboardComponent 内部，ProductComponent 也是如此

Answer 1

您可以使用子路由器插座来完成此操作

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

并将子路由器插座添加到您的DashboardComponent

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

所以当用户访问/dashboard/client 时，DashboardComponent 被加载到顶级路由器出口，ClientComponent 被加载到子路由器出口（@98​​7654328@ 内部）。这是一个stackblitz 演示这个