如何使用两个不同的路由模块与角度答案

【问题标题】：How to use two diferent routing modules with angular如何使用两个不同的路由模块与角度
【发布时间】：2019-06-16 21:14:40
【问题描述】：

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

如果你去 /contact 它去 ContactComponent
如果我转到 /admin/dashboard，它会转到有侧边栏的 AdminComponent，然后在网站的右侧转到 DashboardComponent
如果我转到 /admin/surveys，它的作用与第二种情况相同，它会通过侧边栏转到管理组件，然后打开 SurveysComponent

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

<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 { }

有什么帮助吗？

谢谢。

【问题讨论】：

您显示的代码似乎是正确的。我在一个具有复合路由的应用程序中工作，就是这样。怎么了？
现在只运行带有侧边栏的 ContactComponent 和 AdminComponent，但是 Dashboard 或 Surveys 等子页面不会在 AdminComponent 中加载

标签： angular routing angular2-routing

【解决方案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 { }

【讨论】：

您的代码对我不起作用，因为我认为它无法找到 router-outler “侧边栏”，因为它位于另一个组件中。我不知道确切的问题，但没有工作。
您的插座需要在AdminComponent的模板中

【解决方案2】：

问题是您不使用子路由。如果surveys 是Admin 的子路由，则需要将{ path: 'admin', component: AdminComponent }, 移动到admin-routing.module.ts 并执行以下操作：

{
    path: 'admin', component: AdminComponent, children:
      [
        { path: 'dashboard', component: DashboardComponent, outlet: 'sidebar' },
{ path: 'surveys', component: SurveysComponent, outlet: 'sidebar' },

      ]
  }

但是你要考虑在app.module.ts中输入router模块的顺序。让我再解释一下。在app-routing.module.ts：你有这些路线

{ path: '', redirectTo: 'admin', pathMatch: 'full' },
{ path: '**', redirectTo: '' }

在admin-routing.module.ts：你有这些路线

{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: '' }

当然，您在admin.module.ts 中导入admin-routing.module.ts，但在app.module.ts 中导入AdminModule 和AppRoutingModule 的顺序非常重要。为什么？

例如在导入部分app.module.ts，如果你写AdminModule, AppRoutingModule，那么admin-routing.module.ts的路径""和"**"会一直匹配，任何不匹配的路由都会被匹配指向仪表板。如果您像AppRoutingModule, AdminModule 那样执行反向导入序列，则“”和“**”将被定向到管理员路由。所以，注意路由模块的导入顺序

【讨论】：