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

子路线作为Angular主路线上的默认路线

1 个答案: