Question

我已经定义了如下的嵌套路由。

home --
       about --
                test

当点击链接主持人/关于时，链接将起作用。但是当我导航到 host / about / test 时，它不起作用，只是重定向到“ /”。

请在下面找到代码，并在stackblitz进行演示。并帮助我解决这个问题。

app.module.ts
const appRoutes: any = [
  { path: 'about', pathMatch: 'full', loadChildren: './about/about.module#AboutModule' },
];

@NgModule({
  imports:      [ BrowserModule, FormsModule, RouterModule.forRoot(
      appRoutes ) ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { 


}

app.component.html

<a href="/about">Go to  /about</a><br>

<a href="about/test">Go to  /about/test</a>

<router-outlet></router-outlet>

about.module.ts
const appRoutes: Routes = [
  { path: '', pathMatch: 'full', component: AboutComponent },
  { path: 'test', pathMatch: 'full', loadChildren: './test/test.module#TestModule' },
];

@NgModule({
  declarations: [
    AboutComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
  ],
  providers: []
})

------------
test.module.ts

const appRoutes: Routes = [
  { path: '', pathMatch: 'full', component: TestComponent }
];

@NgModule({
  declarations: [
    TestComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(appRoutes)
  ],
  providers: []
})

Answer 1

我在stackblitz中浏览了您的演示，发现了两个问题：

对于具有loadChildren配置的路径，不应使用pathMatch：'full'。

app.module.ts

{ path: 'about', pathMatch: 'full',  loadChildren: './about/about.module#AboutModule' 
                 ^^^^^^^^^^^^^^^^^
                   remove this

注意拼写

test.module.ts

export class TesttModule {
                ^^
              doubled 't'

Forked Stackblitz

嵌套子路线模块不适用于角度9

1 个答案: