Question

正如您在那堆闪电战中所看到的那样，我对forRoot / forChild路由有些困惑：

https://stackblitz.com/edit/hello-angular-6-thzmnv

在根模块中定义了路由“子路由”：

const routes: Routes = [
  {
    path: 'sub-route',
    loadChildren: () => SubModule,
  },
];

@NgModule({
  imports:      [
    BrowserModule,
    SubModule,
    RouterModule.forRoot(routes),
    SubRoutingModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

在子路由器模块中，定义了路由：

const routes: Routes = [
  {
    path: '',
    component: SubComponent,
  },
  {
    path: 'first',
    component: SubComponent,
    data: { index: 1 },
  },
  {
    path: 'second',
    component: SubComponent,
    data: { index: 2 },
  },
  {
    path: '**',
    redirectTo: 'first',
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class SubRoutingModule {}

我不明白为什么后备路由**不能按预期工作。

例如，导航到/sub-route/second仅重定向到/first。如果定义了合适的路由，为什么要进行重定向？并且如果由于某种原因发生了重定向，为什么它不重定向到/sub-route/first而是仅重定向到/first？谢谢！

Answer 1

由于延迟加载，从AppModule中删除SubRoutingModule和SubModule并将SubRoutingModule添加到SubModule内部。

import { NgModule } from '@angular/core';
import { SubComponent } from './sub.component';
import { SubRoutingModule } from './sub-routing.module';

@NgModule({
  declarations: [
    SubComponent
  ],
  imports: [
    SubRoutingModule
  ],
  exports: [
    SubComponent
  ],
})
export class SubModule {}

然后将路由器出口也添加到subModule。

<router-outlet></router-outlet>
sub-component<br>
index: {{index}}

Answer 2

也许您可以尝试这个

Answer 3

您定义了错误的重定向路径

如果要使用通配符路由返回子组件，则需要提供完整的路径，包括父级和子级。例如：

{ 
   path: '**',
   redirectTo: 'sub-route/first', }

默认通配符路由取回根模块路由。

角度6：forChild后备路由覆盖子路由

3 个答案: