Many router outlets in Angular 6

问题

In my app I have two main parts:

Authorization - login and registration pages
Panel - basic app pages

In my app.component.html I have router outlet for navigation to Authorization and Panel components.

However in the mentioned components I have another router outlets for navigation between cards (subcomponents). I tried to do routing separetly for each module, but it doesnt work. When I go to path eg. "/authorization/login" I got error that such url doesnt exists.

Here is my 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 {
}

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

Could you explain me what I am doing wrong with this routing? I tried many ways to solve this issue, but nothing worked.

回答1:

Change the routes to this:

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}
  ]
}
];

You don't need to specify authorization again, because they are child routes

回答2:

I can suggest you to implement this by creating seperate modules (i.e. Lazy loaded Modules) for each child Components. Lets say for RegisterComponent, you can create RegisterModule. Then you have to change the routes as shown below:

   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' }
        ]
     }
   ];

来源：https://stackoverflow.com/questions/52140072/many-router-outlets-in-angular-6

标签

angular

routing

navigation

angular6