Angular 6 中的许多路由器插座答案

【问题标题】：Many router outlets in Angular 6Angular 6 中的许多路由器插座
【发布时间】：2019-02-07 22:32:55
【问题描述】：

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

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

在我的 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 {
}

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

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

【问题讨论】：

标签： angular routing navigation angular6

【解决方案1】：

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

【讨论】：

【解决方案2】：

将路线更改为：

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

【讨论】：