Question

我必须使用模块，其中在通过auth路由期间延迟加载secound模块。带路由的主模块app模块如下所示：

const app_routes: Routes = [
  { path: '', component: MainComponent, outlet: 'app', pathMatch: 'full', 
  canActivate: [OauthGuard]},
  { path: 'auth', loadChildren: 'app/authentication/authentication.module#AuthenticationModule'},
  { path: '**', component: PageNotFoundComponent, outlet: 'app' }
];

@NgModule({
  declarations: [...],
  imports: [RouterModule.forRoot(app_routes)],
  providers: [OauthGuard],
 bootstrap: [
   AppComponent
 ],
 schemas: [CUSTOM_ELEMENTS_SCHEMA],
 exports: [RouterModule]
})
export class AppModule {}

此处导航到auth会加载AuthenticationModule。

const auth_routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    outlet: 'app',
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      {
        path: 'register',
        component: RegisterComponent,
        outlet: 'auth'
      },
      {
        path: 'login',
        component: LoginComponent,
        outlet: 'auth'
      }
    ]}
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(auth_routes),
    UtilsModule,
    HttpModule
  ],
  declarations: [
    AuthenticationComponent,
    RegisterComponent,
    LoginComponent
  ],
  exports: [
    RouterModule
  ],
  providers: [
    ClientService,
    AuthenticationService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [
    AuthenticationComponent
  ]
})

export class AuthenticationModule {
}

导航到LoginComponent时，根据我的逻辑auth应加载到auth/login路由器插座上。但相反，我收到此错误消息：

错误：无法匹配任何路线。网址细分：'auth / login'

正如我所记录的那样，在第一次路线改变时调用canActivate()时记录的路线记录下来：

Routes:  [
  {
    "path": "",
    "outlet": "app",
    "pathMatch": "full",
    "canActivate": [
      null
    ]
  },
  {
    "path": "auth",
    "loadChildren": "app/authentication/authentication.module#AuthenticationModule"
  },
  {
    "path": "**",
    "outlet": "app"
  }
]

在àuthentication.module`构造函数的run中注册的路由相同。

我真的不知道为什么我仍然会收到此错误。有什么提示吗？

Answer 1

在一些帮助下我解决了问题，问题出在了插座名称上。我不知道只要它们属于不同的范围，就有可能有多个未命名的router-outlets。所以我所做的只是删除插座名称。使用我的旧代码，我必须导航到/auth(auth:login)，其中(auth:login)指定要显示的插座名称和子路由。如果没有插座名称，我只需导航到auth/login即可到达所需的页面。

authentication.module

const routes: Routes = [
  {
    path: '',
    component: AuthenticationComponent,
    children: [
      { path: '', redirectTo: 'login', pathMatch: 'full'},
      {
        path: 'register',
        component: RegisterComponent
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]}
];

角度多模块路由

1 个答案:

authentication.module