javascript - 子路由作为 Angular 主路由上的默认路由

Question

我有一个 Angular 6 应用程序，并且有一条包含子路线的路线。但如果你走主路线，你就必须走主路线的第一条子路线。像这样:

http://localhost:4200/instellingen/account

但现在是这样的:

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

我尝试了很多，也用谷歌搜索了很多

所以我在 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>

Answer 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 },
 ]
},