Question

使用最新版本玩角度2路线的玩家，我注意到下面添加了一个子路由导致/ admin路由无法工作

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin.component';
import {AdminChildComponent} from './admin-child.component';

import {productRoutes} from "../product/product.routes";

export const adminRoutes : Routes =[
  {
    path: 'admin', component: AdminComponent,
    children:[
      {path:"/child", component:AdminChildComponent}
    ]
  }
];

export const adminRouting: ModuleWithProviders = RouterModule.forChild(adminRoutes);

一旦我在下面删除，应用程序就会很好，我添加它后会立即出现控制台错误

EXCEPTION：未捕获（承诺）：错误：无法匹配任何路线： '管理员'

   children:[
      {path:"/child", component:AdminChildComponent}
    ]

需要帮助才能理解为什么会出现此错误。完全令人困惑。

Answer 1

那是因为：

在这里可以清楚地看到 AdminComponent 有孩子。这意味着 AdminComponent 将在模板中的某处具有 router-outlet 。

现在的情况是，每当使用 router-outlet 时，都需要视图。在您的路由案例中，它没有任何正确/主要子路由。所以你需要设置它，如下所示，

export const adminRoutes : Routes =[
  {
    path: 'admin', component: AdminComponent,
    children:[

      { path: '', redirectTo: 'child', pathMatch: 'full'}, //<----- here

      {path:"child", component:AdminChildComponent}
    ]
  }
];

注意：已将/child更改为child。为什么？因为angular2路由器本身在父路由和子路由之间添加/。所以这里你不需要/。

Angular 2路由，添加子路由会导致路由不起作用

1 个答案: