Question

我想在我的角度项目中添加两个路由模块，但我不能，我想做这样的事情：

如果您转到/ contact，则转到ContactComponent
如果我转到/ admin / dashboard，则转到带有侧边栏的AdminComponent，然后在网站的右侧转到DashboardComponent
如果我转到/ admin / surveys，它的作用与第二种情况相同，则使用侧边栏转到“管理组件”，然后打开SurveysComponent

现在，我可以创建一个与常规URL（如联系页面）一起使用的常规路由模块，但我不知道如何为/ admin / surveys或admin等管理页面添加另一个路由模块 / admin /仪表板。另一个选择是添加两个路由出口，但其中一个位于不同的组件中，并且位于第一个路由出口中。我的意思是这样的：

<router-outlet name="r1">
    ContactComponent or
    AdminComponent
        <router-outlet name="r2">
            DashboardComponent or
            SurveysComponent
        </router-outlet>
</router-outlet>

我的代码：

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'admin', pathMatch: 'full' },
    { path: 'contact', component: ContactComponent },
    { path: 'admin', component: AdminComponent },
    { path: '**', redirectTo: '' }
];

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

admin.component.html

<div class="sidebar">
    <!--Here is the menu-->
</div>
<div class="content">
    <router-outlet name="sidebar"></router-outlet>
</div>

admin-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardComponent, outlet: 'sidebar' },
    { path: 'surveys', component: SurveysComponent, outlet: 'sidebar' },
    { path: '**', redirectTo: '' }
];

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

有帮助吗？

谢谢。

Answer 1

Angular不知道管理路由是管理组件的子级。您可以完全延迟加载管理模块（请参见https://angular.io/guide/lazy-loading-ngmodules#add-another-feature-module）或在app-routing.module.ts

中定义子级

app-routing.module.ts

const routes: Routes = [
    { path: '', redirectTo: 'admin', pathMatch: 'full' },
    { path: 'contact', component: ContactComponent },
    { 
        path: 'admin',
        component: AdminComponent,
        children: [{ 
            path: '',
            redirectTo: 'dashboard',
            pathMatch: 'full'
        }, {
            path: 'dashboard',
            component: DashboardComponent,
            outlet: 'sidebar'
        }, {
            path: 'surveys',
            component: SurveysComponent,
            outlet: 'sidebar'
        }]
    },
    { path: '**', redirectTo: '' }
];

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

如何使用两个不同的路由模块

1 个答案: