Question

我有一个组件在路由变为'main'时被加载。我在其路线中定义了一个名为“test”的子路线

当路由设置为main / test时，我希望测试组件加载到主组件中。在主要组件内部，我有一个路由器插座，用于显示子组件。

这是我的main.routes.ts：

    import { Route } from '@angular/router';
    import { MainComponent } from './main.component';
    import { TestComponent } from './test/test.component';
    import { SessionGuard } from '../../services/session/session.guard';

    export const MainRoutes: Route[] = [
      {
        path: 'main',
        component: MainComponent,
        canActivate: [SessionGuard],
        children: [
      {   path: 'test', component: TestComponent }
    ]
  }
];

在主要组件html中我有：

Main
<router-outlet></router-outlet>

我得到的错误是：无法匹配任何主要/测试路线

触发路线更改的按钮：

<button type="button" class="btn btn-default" (click)="changeRoute('main/test');" >Test</button>

改变路线的方法：

changeRoute(route: string) {
    event.stopPropagation();
    this.router.navigate([route]);
}

由于

Answer 1

router-outlet 不能为空。这意味着当您重定向到主组件时，您没有任何默认子路由器集。您只需按如下所示进行设置，

export const MainRoutes: Route[] = [
      {
        path: 'main',
        component: MainComponent,
        canActivate: [SessionGuard],
        children: [
                     {path:'',redirectTo:'test', pathMatch: 'full'},
                     {path: 'test', component: TestComponent }
    ]

如果您只想使用按钮的点击事件重定向到 test ，那么您应该使用以下配置，

export const MainRoutes: Route[] = [
      {
        path: 'main',
        component: MainComponent,
        canActivate: [SessionGuard],
        children: [
                     {path:'',component:null},     //<<<<### here with null value
                     {path: 'test', component: TestComponent }
    ]

Angular 2 - 带路由器插座的子路由

1 个答案: