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屋！