Многие роутеры в Ангуляр 6 - PullRequest
0 голосов
/ 02 сентября 2018

В моем приложении у меня есть две основные части:

  • Авторизация - страницы входа и регистрации
  • Панель - основные страницы приложения

В моем app.component.html у меня есть выход маршрутизатора для навигации по компонентам авторизации и Panel.

Однако в упомянутых компонентах у меня есть другие выходы маршрутизатора для навигации между картами (подкомпонентами). Я попытался сделать маршрутизацию отдельно для каждого модуля, но это не работает. Когда я иду по пути, например. "/ authorization / login" Я получил ошибку, что такой URL не существует.

Вот мой app-routing.module.ts

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

import { PanelComponent } from '../panel/panel.component';
import { AuthorizationComponent } from '../authorization/authorization.component';
import { DeliveriesComponent } from '../panel/cards/deliveries/deliveries.component';

const routes: Routes = [
  {path: '', redirectTo: 'authorization', pathMatch: 'full'}
];

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

разрешительного routing.module.ts

const authorizationRoutes: Routes = [
  {path: 'authorization', component: AuthorizationComponent, children: [
    {path: 'authorization/register', component: RegisterComponent},
    {path: 'authorization/login', component: LoginComponent},
    {path: 'authorization/restaurant-registration', component: RestaurantRegistrationComponent},
    {path: 'authorization/confirmation', component: ConfirmationComponent}
  ]
}
];

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

app.module.ts

import { PanelModule } from './panel/panel.module';
import { AuthorizationModule } from './authorization/authorization.module';

import { RoutingModule } from './routing/routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    LayoutModule,
    PanelModule,
    AuthorizationModule,
    FormsModule,
    RoutingModule
  ],
  providers: [],
  bootstrap: [
    AppComponent,
  ]
})
export class AppModule {
}

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

Ответы [ 2 ]

0 голосов
/ 05 сентября 2018

Я могу предложить вам реализовать это, создав отдельные модули (т.е. модули с отложенной загрузкой) для каждого дочернего компонента. Допустим, для RegisterComponent вы можете создать RegisterModule. Затем вы должны изменить маршруты, как показано ниже:

   const authorizationRoutes: Routes = [
     {  path: 'authorization', 
        component: AuthorizationComponent, 
        children: [
          { path: 'register', loadChildren: './register/register.module#RegisterModule' },
          { path: 'login', loadChildren: './login/login.module#LoginModule' },
          { path: 'restaurant-registration', loadChildren: './restaurant-registration/restaurant-registration.module#RestaurantRegistrationModule' },
          { path: 'confirmation', loadChildren: './confirmation/confirmation.module#ConfirmationModule' }
        ]
     }
   ];
0 голосов
/ 02 сентября 2018

Измените маршруты на это:

const authorizationRoutes: Routes = [
  {path: 'authorization', component: AuthorizationComponent, children: [
    {path: 'register', component: RegisterComponent},
    {path: 'login', component: LoginComponent},
    {path: 'restaurant-registration', component: RestaurantRegistrationComponent},
    {path: 'confirmation', component: ConfirmationComponent}
  ]
}
];

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...