Angular 角6中的许多路由器出口

在我的应用程序中，我有两个主要部分：

• 授权-登录和注册页面
• 面板-基本应用程序页面

在我的app.component.html中，我有用于导航到授权和面板组件的路由器插座

然而，在上述组件中，我有另一个用于卡之间导航的路由器插座（子组件）。我试着为每个模块分别进行路由，但不起作用。当我转到路径，例如“/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 {
}

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

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

授权路由.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 {
}

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

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

app.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 {
}

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

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

---

你能解释一下我在这条路线上犯了什么错误吗？我尝试了许多方法来解决这个问题，但都没有奏效。

将路线更改为：

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

---

您无需再次指定

授权

，因为它们是子路由

我建议您通过为每个子组件创建单独的模块（即延迟加载的模块）来实现这一点。假设对于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' }
        ]
     }
   ];