Question

我想在多个模块之间共享side-nav路由，例如路由“ / admin”，这样我就可以拥有这样的东西：

 "admin/side-nav-children(all_side_nav_routes)".

一切正常，但我的管理模块未加载与导航栏相关的路由器出口，甚至未检测到子路由。

我的应用程序中已经有一个路由器插座，该路由器插座正在加载管理模块，该路由器插座位于app.component.html中。

app-routing.module.ts路由：

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent },
      { path: 'admin', loadChildren: './core/admin/admin.module#AdminModule' },
      { path: 'cashin', loadChildren: './core/cashin/cashin.module#CashinModule' },
      { path: 'cashout', loadChildren: './core/cashout/cashout.module#CashoutModule' },
      { path: 'finantial', loadChildren: './core/finantial/finantial.module#FinantialModule' },
      { path: 'support', loadChildren: './core/support/support.module#SupportModule' }
    ]
  }
];

admin-routes.ts路由

const routes: Routes = [
{
    path: '',
    component: AdminComponent,
    children: sideNavRoutes
}
];

side-nav.routes.ts

export const sideNavRoutes: Routes = [
{
  path: '',
  component: SideNavComponent,
  children: [
    { path: '' , redirectTo: 'start', pathMatch: 'full' },
    { path: 'start', component: StartComponent, outlet: 'sidebar' },
    { path: 'users', component: UsersComponent },
    { path: 'sessions', component: SessionsComponent },
    { path: 'transactions', component: TransactionsComponent },
    { path: 'options', component: OptionsComponent },
    { path: 'income', component: IncomeComponent },
    { path: 'expenses', component: ExpensesComponent },
    { path: 'commissions', component: CommissionsComponent }
  ]
}
]

这是我目前的侧面导航模板：

side-nav.component.html

    <router-outlet name="sidebar"></router-outlet> 
    <h1>SIDE NAV</h1>

和我的管理模板

admin.component.html

<h1>Admin</h1>
<side-nav></side-nav>

Answer 1

您可以通过创建一个单独的路由模块并在此模块中添加路由器信息来做到这一点

routing.module.ts文件结构

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { LoginComponent } from './user/login/login.component'; //your component

const routes: Routes = [
    {
        path: '',
        component: SideNavComponent,
        children: [
            { path: '' , redirectTo: 'start', pathMatch: 'full' },
            { path: 'start', component: StartComponent, outlet: 'sidebar' },
            { path: 'users', component: UsersComponent },
            { path: 'sessions', component: SessionsComponent },
            { path: 'transactions', component: TransactionsComponent },
            { path: 'options', component: OptionsComponent },
            { path: 'income', component: IncomeComponent },
            { path: 'expenses', component: ExpensesComponent },
            { path: 'commissions', component: CommissionsComponent }
        ]
    }
  ];

@NgModule({
  imports: [ RouterModule.forRoot(routes)],
  exports: [
      RouterModule // need to export RouterModule
   ] 
})
export class RoutingModule { };

然后将您的路由模块导入并注入到基本模块app.module中

app.module.ts

import { RoutingModule } from './routing.module';

@NgModule({
  declarations: [],
  imports: [
    RoutingModule
  ],
  exports: [],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

因此，此方法将使路线适用于整个范围。请让我知道是否需要任何帮助

如何在多个模块之间使用相同的嵌套路由器出口？

1 个答案: