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

Question

在使用最新版本玩 angular 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);

一旦我在下面删除，应用程序就可以正常工作，一旦我添加它，我就会收到控制台错误

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

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

可能需要帮助来了解为什么会出现此错误。完全混乱。

Answer 1

那是因为：

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

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

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

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

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

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