Question

我正在尝试为角度组件设置默认子路由，但我似乎无法使用以下任一方法。我出错的任何想法？

RouterModule.forRoot([
  { path: 'signin', component: SignInComponent, canActivate: [UnauthGuard] },
  { path: '', component: MainComponent, canActivate: [AuthGuard] },
]);

RouterModule.forChild([{
  path: '',
  component: MainComponent,
  children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    // { path: '', component: DashboardComponent },
  ]
}]);

Answer 1

问题是您的基本href路由无法在任何地方加载forChild路由。将孩子加载到路线有几种不同的方法，但这是我的标准：

在您的基本应用 routing.module.ts 中，导入包含您的子路由的子模块。

import { ChildModule } from './child/child.module';

对于生产构建，我为AOT编译添加了一个简单的导出函数：

export function loadChildModule() {
  return ChildModule;
}

并且您的@NgModule应声明子路线，如：

{ path: 'dashboard', loadChildren: loadChildModoule },
{ path: '', component: MainComponent }

您的 child / child.module.ts 需要从 child / child-routing.modules.ts 导入路线。

child.module将包含：

import { ChildRoutingModule } from './child-routing.module';
...
*NgModule({
  imports: [
    CommonModule,
    ChildRoutingModule
  ]
...

和你的child-routing.module：

import { DashboardComponent } from './dashboard/dashboard.component';
import { ChildComponent2 } from './child2/child2.component';
import { ChildComponent3 } from './child3/child3.component';

const routes: Routes = [
  { path: 'child2', component: ChildComponent2 },
  { path: 'child3', component: ChildComponent3 },
  { path: 'dashboard', component: DashboardComponent },
  { path: '', redirectTo: 'dashboard', pathMatch: 'full' }
];

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

您可以将子项添加到子模块，就像将它们添加到主应用程序RoutingModule一样。另请注意，您可以使用与问题中发布的.forChild路线类似的设置。唯一的区别是你必须使用至少一个命名路线（例如你的主要组件将有路径：＆＃39; home＆＃39;并且应该有一个重定向到路径：＆＃39;＆＃39; to redirectTo：＆＃39; home＆＃39;）在每个.forChild。

Answer 2

在父组件上写：<router-outlet></router-outlet>。在这种情况下写在MainComponent上。

子路由重定向不起作用

2 个答案: