javascript - 在 Angular 2 路由器中使用子状态会引发错误

Question

这是我的路由器配置:

import { RouterConfig } from '@angular/router';

...

export const AppRoutes : RouterConfig = [
  {
    path: '',
    redirectTo: 'myview',
    pathMatch: 'full'
  },
  {
    path: 'myview',
    component: ViewComponent,
    children: [{
      path: 'hello',
      component: HelloComponent
    }]
  },
];

当我尝试加载页面时，出现以下错误:

EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: ''

但是，当我将子路由设为同级路由时，如下所示:

export const AppRoutes : RouterConfig = [
  {
    path: '',
    redirectTo: 'myview',
    pathMatch: 'full'
  },
  {
    path: 'myview',
    component: ViewComponent
  },
  {
      path: 'hello',
      component: HelloComponent
    }
];

我能够正常加载页面，没有任何错误。我做错了什么？

Answer 1

因为您设计它的方式是在初始加载时，它会登陆 ViewComponent组件但是ViewComponent有 child ，所以必须重定向到内部组件。

您需要为 child 再添加一条路线 routes这将重定向 ''至hello组件。

export const AppRoutes: RouterConfig = [
  { path: '', redirectTo: 'myview', pathMatch: 'full'}, 
  { path: 'myview', component: ViewComponent,
      children: [
        { path: '', pathMatch: 'full', redirectTo: 'hello' }, //added redirection to hello
        { path: 'hello', component: HelloComponent }
    ]
  }
];

Note: Make sure you have <router-outlet></router-outlet> in myview component HTML so that child route view can be shown correctly.