角度多模态路由

Question

我必须模块，其中 secound 模块在通过auth路由期间延迟加载。主模块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 {
}

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

错误：无法匹配任何路由。网址细分："身份验证/登录">

正如建议的那样，我记录了在第一次路由更改时调用canActivate()时注册的路由，得到以下内容：

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

注册的路由在 àuthentication.module 构造函数的运行中是相同的。

我

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

Answer 1

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

身份验证模块

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