Angular 6 中有许多路由器插座 [英] Many router outlets in Angular 6

问题描述

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

In my app I have two main parts:

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

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

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

然而，在提到的组件中，我有另一个路由器插座用于卡(子组件)之间的导航.我试图为每个模块单独进行路由，但它不起作用.当我去路径例如./authorization/login" 我得到这样的 url 不存在的错误.

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.

这是我的 app-routing.module.ts

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

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

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.

推荐答案

我建议您通过为每个子组件创建单独的模块(即延迟加载的模块)来实现这一点.假设对于 RegisterComponent，您可以创建 RegisterModule.然后你必须改变路线，如下所示:

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

这篇关于Angular 6 中有许多路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！