子路由作为 Angular 主路由上的默认路由答案

【问题标题】：Child route as default route on the main route in Angular子路由作为 Angular 主路由上的默认路由
【发布时间】：2019-07-16 11:45:26
【问题描述】：

我有一个 Angular 6 应用程序，并且我有一个带有子路由的路由。但是如果你去主路由，你必须去主路由的第一个子路由。像这样：

http://localhost:4200/instellingen/account

但现在是这样的：

http://localhost:4200/instellingen/instellingen/account

我尝试了很多，google了很多

所以我在 app.routes.ts 文件中有这个：

{
     path: 'instellingen',    
     component: SettingsNavigationComponent,
     canActivate: [AuthGuard],
     children: [
      {path: '', redirectTo: 'instellingen/account', pathMatch: 'full' },
      {path: 'instellingen/account', component: SettingsAccountComponent },
      {path: 'apparaten' , component: SelfcareComponent },
      {path: 'apparaten' , component: SelfcareComponent },
      {path: 'apps' , component: SettingsAppsComponent },
      {path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent },
      {path: 'algemeen' , component: SettingsGeneralComponent },
      { path: 'algemeen', component: SettingsGeneralComponent },
      {path: 'log' , component: SettingsLogComponent },
     ]
   },

谢谢

Thank you. but then I get this error: Error: Invalid configuration of route '{path: "instellingen/", redirectTo: "account"}': please provide 'pathMatch'. The default value of 'pathMatch' is 'prefix', but often the intent is to use 'full'.
    at validateNode (router.js:554)
    at validateConfig (router.js:515)
    at validateNode (router.js:560)
    at validateConfig (router.js:515)
    at Router.push../node_modules/@angular/router/fesm5/router.js.Router.resetConfig (router.js:3546)
    at new Router (router.js:3427)
    at setupRouter (router.js:5385)
    at _callFactory (core.js:9291)
    at _createProviderInstance$1 (core.js:9237)
    at initNgModule (core.js:9170)

这就是导航组件的样子：

<nav class="nav-tab-bar">
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/account">Account</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/apparaten">Apparaten</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/apps">Apps</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/indicatiepermissies">Meldingen</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/algemeen">Gegevens toegang</a>
  <a class="nav-tab-bar-tab" routerLinkActive="active" routerLink="/instellingen/log">Log</a>

</nav>
<router-outlet></router-outlet>

【问题讨论】：

标签： javascript angular

【解决方案1】：

关注以下变化

{
 path: 'instellingen',    
 component: SettingsNavigationComponent,
 canActivate: [AuthGuard],
 children: [
  { path: '', redirectTo: 'account', pathMatch: 'full' },
  { path: 'account', component: SettingsAccountComponent },
  { path: 'apparaten' , component: SelfcareComponent },
  { path: 'apparaten' , component: SelfcareComponent },
  { path: 'apps' , component: SettingsAppsComponent },
  { path: 'indicatiepermissies' , component: SettingsIndicatorPermissionsComponent },
  { path: 'algemeen' , component: SettingsGeneralComponent },
  { path: 'algemeen', component: SettingsGeneralComponent },
  { path: 'log' , component: SettingsLogComponent },
 ]
},

【讨论】：

如果我尝试这样做，那么我会得到这个错误：错误：路由'{path：“instellingen/”，redirectTo：“account”}'的配置无效：请提供'pathMatch'。默认值o
我还用 html 文件中的链接更新了帖子
@Bhavin。谢谢！！非常好。你拯救了这一天！