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有子，所以必须重定向到内部组件。

您需要向儿童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 }
    ]
  }
];

注意：确保<router-outlet></router-outlet>组件HTML中包含myview，以便可以显示子路径视图正确。

Answer 2

您在RouterConfig中没有使用''的任何路由。

在重定向后，新路径将为https://yourdomain/myview/。为此，您只在routeCofig中创建了https://yourdomain/myview/hello路由

我已经在角度2中创建了一个应用程序。您可以在Github上查看源here。

只需在子路径数组中添加以下行：

{path: '', component: HelloComponent }

检查hero.routes.ts和dragon.routes.ts文件，它们将帮助您更清楚地了解路由。希望它会有所帮助。谢谢。

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

2 个答案: