Question

让我们说AppModule是应用的根模块。它的路由文件如下所示：

...
const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  {
    path: 'auth',
    loadChildren: './modules/auth/auth.module#AuthModule',
  }
]
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

AuthModule路由文件如下所示：

...
const authRoutes: Routes = [
  {
    path: '',
    loadChildren: './login/login.module#LoginModule',
  },
  {
    path: 'registration',
    loadChildren: './registration/registration.module#RegistrationModule'
  }
];
export const authRouting: ModuleWithProviders = RouterModule.forChild(authRoutes);

LoginModule路由文件如下所示，一切正常：

const loginRoutes: Routes = [
  { path: '', component: LoginStep1Component },
  { path: 'a', component: LoginStep2Component }
];
export const loginRouting: ModuleWithProviders = RouterModule.forChild(loginRoutes);

但是当我尝试使用某个基本组件通过具有路由器文件的<router-outlet>来包装Login组件时出现了一些麻烦：

const loginRoutes: Routes = [
  {
    path: '',
    component: LoginComponent,
    children: [
      { path: '', component: LoginStep1Component, pathMatch: "full" /*tried also without pathMatch*/ },
      { path: 'a', component: LoginStep2Component }
    ]
  }
];

localhost:4200/auth正常显示LoginStep1Component。

但是localhost:4200/auth/a不起作用。我无法通过链接导航或浏览器的URL栏访问它并查看LoginStep2Component。

我也试图取代＆＃39;＆＃39;有一些路径，但它也没有帮助。我不认为这是一个合适的解决方案。

儿童路线不按预期工作

0 个答案: