Question

我正在使用Angular 5和延迟加载架构为rest 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。但是，如果我从:id删除EventsModule路由，则一切正常！添加最后一条路线时为什么停止工作？

PS：要导航到这些路线中的每一条，我只使用像此routerLink="/register">这样的routerLink指令。

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。编辑这不是真的

在那之后，你不应该讨论这个问题（我想），如果有的话，请告诉我这个新问题是什么，所以我可以帮助你。

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

1 个答案: