Angular 4 延迟加载路由 - 子级未加载答案

【问题标题】：Angular 4 lazy load routing - children not loadingAngular 4 延迟加载路由 - 子级未加载
【发布时间】：2017-08-28 09:33:45
【问题描述】：

我有一个延迟加载组件，但其中的路由存在问题。

路线如下所示：

    const routes:  Routes {
      {path: '': component: ReportsComponent, children:[
         {path: '', component: DeviceReportComponent},
         {path: 'sites', component: SiteReportComponent},
         {path: 'devices', component: DeviceReportComponent}
      ]}
    }

现在，当我导航到组件时，第一条路线完美加载，但之后的任何导航尝试都会被忽略。

有什么想法吗？

【问题讨论】：

在您显示的代码中，您拼错了children，这只是复制粘贴时的拼写错误吗？
输入错误，系统处于未连接到互联网的专用网络中

标签： angular

【解决方案1】：

我可以想象有两个空路径路由到两个不同的组件会导致问题。 this training 表明根空路径总是路由到带有组件的命名路由：

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails,
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

您可以尝试坚持使用该模板。

【讨论】：

这是懒加载路由，子路由在子路由中

【解决方案2】：

好的

在代码中进行了一些挖掘后，发现了错误：在主路由器中，我有 reports/:type ，其中 :type 显然没有地方......

【讨论】：

你想说什么。解释清楚，这样可以帮助别人。