Angular 6 中的许多路由器插座

Question

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

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

在我的应用程序组件中.html我有路由器出口，用于导航到授权和面板组件。

但是，在提到的组件中，我有另一个路由器插座用于在卡(子组件(之间导航。我试图为每个模块单独进行路由，但它不起作用。当我去路径时，例如。"/授权/登录"我收到错误，指出此类网址不存在。

这是我的应用程序路由.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-routeting.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 {
}

你能解释一下我在这条路线上做错了什么吗？我尝试了很多方法来解决这个问题，但没有任何效果。

Answer 1

将路由更改为以下内容：

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，因为它们是子路由

Answer 2

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