子路由的角度 4 路由问题答案

【问题标题】：angular 4 routing issue with child routes子路由的角度 4 路由问题
【发布时间】：2017-10-10 08:03:26
【问题描述】：

在我的 Angular 4 应用程序中，我的路由有一些问题，可能我错了，目前的问题是像这样的路由path: ':code/copy'，我可以正确路由到这个组件，但是当我在里面时如果我重新加载页面，角度无法加载 css 文件。

在我的 app.routing 中，我有一条路径：

path: 'ticketBundles',
loadChildren: './ticket-bundles/shared/ticket-bundle.module#TicketBundleModule'`

而ticketBundles的结构是这样的：

所以在我的 ticket-bundle.routing 中我有：

import {Routes} from '@angular/router';
import {TicketBundleListComponent} from '../ticket-bundle-list/ticket-bundle-list.component';
import {TicketBundleNewComponent} from '../ticket-bundle-new/ticket-bundle-new.component';
import {TicketBundleDetailComponent} from '../ticket-bundle-detail/ticket-bundle-detail.component'

export const TicketBundleRoutes: Routes = [
  {
    path: '',
    component: TicketBundleListComponent
  },
  {
    path: 'new',
    component: TicketBundleNewComponent
  },
  {
    path: ':code',
    component: TicketBundleDetailComponent,
  },
  {
    path: ':code/copy',
    component: TicketBundleNewComponent
  }
];

如果我作为孩子path: ':code/copy' 走这条路，我该如何路由到它？因为如果我这样做，它就无法匹配任何路线。要在这个组件中路由，在 ticket-bundlelist.component 我做：this.router.navigate(['/ticketBundles', code])

如前所述，目前我只对这条路由有问题：:code/copy 那么如何更正路由结构以使其正常工作？

【问题讨论】：

标签： angular angular4-router

【解决方案1】：

如果我正确理解您的问题，您应该重新排序路线。 Angular 从顶部开始匹配路由。

因此，在这种情况下，当您导航到 :code/copy 时，它将从第一个元素开始在 TicketBundleRoutes 中查找它。当它找到:code 时，它将返回该路线并且不再查看。将:code/copy 移到:code 路径上方，看看是否有效。

【讨论】：

我只有在刷新页面 :code/copy 时才会遇到这个问题，当我路由到 :code/copy 页面时它可以工作，所以可能顺序不是问题
控制台是否有任何错误写入？或者您可以在开发者工具中的 css 文件的网络选项卡下看到什么？
GET http://localhost:4200/ticketBundles/assets/css/bootstrap.min.css net::ERR_ABORTED copy:20 GET http://localhost:4200/ticketBundles/assets/css/material-dashboard.css net::ERR_ABORTED copy:24 GET http://localhost:4200/ticketBundles/assets/css/demo.css net::ERR_ABORTED
你的文件夹结构如何，是ticketBundles文件夹下的资产吗？您的 css 文件是如何包含在内的？
不，资产在 src 中。在我的索引文件中：<link href="../assets/css/material-dashboard.css" rel="stylesheet" />

【解决方案2】：

这完全是我的错，css路径错误，我使用../assets但正确的路径是/assets 但我不明白为什么它在除此之外的所有路径不正确的页面中都能正常工作，现在使用正确的路径效果很好

【讨论】：