子路由重定向不起作用

Question

我正在尝试为 angular 组件设置默认子路由，但我似乎无法使用以下任何一种方法让它工作。我哪里出错了？

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

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

Answer 2

问题是您的基本 href 路由不会在任何地方加载 forChild 路由。有几种不同的方法可以将 children 加载到路由中，但这是我的标准：

在您的基础应用程序 routing.module.ts 中，导入包含您的 child 路由的 sub-module。

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

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

export function loadChildModule() {
  return ChildModule;
}

你的 @NgModule 应该像这样声明 child 路由：

{ 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 { }

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

子路由重定向不起作用

Child route redirect not working

angular-routing

angular