Как использовать два разных модуля маршрутизации с угловым - PullRequest
Новая
       12

Как использовать два разных модуля маршрутизации с угловым

0 голосов
/ 17 июня 2019

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

  • Если вы идете / контакт, он переходит к ContactComponent
  • Если я захожу в / admin / dashboard, он идет к AdminComponent, что есть боковая панель, а затем в правой части веб-сайта переходит к DashboardComponent
  • Если я захожу в / admin / surveyys, он делает то же, что и во втором случае, он переходит к компоненту Admin с боковой панелью, а затем открывает SurveysComponent

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

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

приложение-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>

админа 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 { }

Любая помощь?

Спасибо.

1 Ответ

0 голосов
/ 17 июня 2019

Angular не знает, что маршруты администратора являются дочерними для компонента admin.Вы можете полностью лениво загрузить модуль администратора (см. 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 { }
...