Angular无法加载子路由

时间:2018-06-07 17:39:56

标签: angular angular-routing

我会以角度

导航到儿童路线

这是路线文件

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { ModuleWithProviders } from "@angular/core";
import { AdministrationComponent } from "./administration.component";
import { UserDisplayComponent } from "./user-display/user-display.component";
import { ResulTabComponent } from "./result-tab/result-tab.component";
const routes: Routes = [
  {
    path: "",
    component: AdministrationComponent,
    pathMatch: "full",
    children: [
      { path: "", component: ResulTabComponent, pathMatch: "full" },
      { path: "userdetails", component: UserDisplayComponent }
    ]
  }
];

export const AdministrationRouting: ModuleWithProviders = RouterModule.forChild(
  routes
);
{
}

管理组件在路由administration

上延迟加载

当我点击一个表格行时,我会导航到userdetails路线,所以http://localhost:4200/administration/userdetails

selectedUserDetails(userDetails) {
  this.router.navigate(["userdetails"]);
}

其实我收到了这个错误

  

错误错误:未捕获(在承诺中):错误:无法匹配任何路由。网址细分:'userdetails'

2 个答案:

答案 0 :(得分:1)

您似乎错过了/administration

selectedUserDetails(userDetails) {
  this.router.navigate(["/administration", "userdetails"]);
}

父路线必须在路径中有“管理”

const routes: Routes = [
  {
    path: "administration",
    component: AdministrationComponent,
    pathMatch: "full",
    children: [
      { path: "", component: ResulTabComponent, pathMatch: "full" },
      { path: "userdetails", component: UserDisplayComponent }
    ]
  }
];

看看这个post

答案 1 :(得分:0)

您的AdministrationComponent和ResulTabComponent被定义为同一路径。

相关问题