为什么路由器只匹配Angular5中的一条路由？

Question

我正在使用 Angular 5 和惰性加载架构开发客户端以供休息 API。我在 AppModule 中有以下路由是使用 RouterModule forRoot() 方法导入的：

const routes: Routes = [
  {
    path: '',
    loadChildren: 'app/home/home.module#HomeModule',
  },
  {
    path: 'login',
    loadChildren: 'app/login/login.module#LoginModule',
  },
  {
    path: 'register',
    loadChildren: 'app/register/register.module#RegisterModule',
  },
  {
    path: 'forgot-password',
    loadChildren: 'app/forgot-password/forgot-password.module#ForgotPasswordModule',
  },
  {
    path: 'events',
    loadChildren: 'app/events/events.module#EventsModule',
  }
];

然后 HomeModule、LoginModule、RegisterModule 和 PasswordModule 我只有这条路线：

const routes: Routes = [
  {
    path: '',
    component: ...
  }
];

它们中的每一个都是使用 RouterModule forChild() 方法导入的。 EventsModule 路线如下：

const routes: Routes = [
  {
    path: '',
    component: EventSearchResultsComponent,
  },
  {
    path: 'new',
    component: NewEventComponent,
  },
  {
    path: ':id',
    component: EventDetailsComponent
  }
];

我面临的问题是我的应用程序中的每个路由都在加载 EventDetailsComponent 除了根路由，它正确加载 HomeComponent。但是，如果我从 EventsModule 中删除 :id 路由，一切正常！为什么当我添加最后一条路线时它停止工作？

PS：为了导航到这些路由中的每一个，我只使用像这样的 routerLink 指令 routerLink="/register">。

Answer 1

导航时，您应该使用

[routerLink]="['/register']" // absolute routing
[routerLink]="['register']" // relative routing

当您必须处理参数时，这将简化您的导航。

接下来，您应该删除这些行

  {
    path: '',
    loadChildren: 'app/home/home.module#HomeModule',
  },

因为延迟加载路由比默认加载有什么意义？

之后，你应该定义你的路线，而不是使用

{
  path: '', component: [Home|Register|Login|Password]Component
}

因为所有这些路由都是相同的：定义延迟加载策略实际上并没有定义路由。延迟加载策略中的路由必须匹配现有路由，并且您没有设置路由 [register|home|login|password。编辑这不是真的

在那之后，你应该不会遇到这个问题（我认为），如果是，请告诉我新问题是什么，以便我可以帮助你。

为什么路由器只匹配Angular5中的一条路由？

Why the router is only matching one route in Angular 5?

routing

router

angular