Как использовать одну и ту же вложенную роутер-розетку среди нескольких модулей? - PullRequest
Новая
       18

Как использовать одну и ту же вложенную роутер-розетку среди нескольких модулей?

0 голосов
/ 14 мая 2019

Я хотел бы разделить маршруты боковой навигации среди нескольких модулей, например, маршрут "/ admin", чтобы у меня могло быть что-то вроде этого: 

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

Все работает нормально, но мой модуль администраторане загружается розетка маршрутизатора, связанная с навигационной панелью, и даже не обнаруживаются дочерние маршруты.

У меня уже есть одна розетка маршрутизатора в моем приложении, та, которая загружает модуль администратора, эта розетка маршрутизаторанаходится в app.component.html.

enter image description here

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-маршруты.т маршруты 

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>

1 Ответ

0 голосов
/ 14 мая 2019

Вы можете сделать это, создав отдельный модуль для маршрутизации и добавив информацию о своем маршрутизаторе в этот модуль следующим образом:

Файловая структура 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 {}

Таким образом, этот подход сделает маршрут доступным для всего приложения.Пожалуйста, дайте мне знать, если вам нужна помощь

...