[英]Child route as default route on the main route in Angular
I hava a Angular 6 application and I have a route with child routes. 我有一个Angular 6应用程序,并且有一条带有子路线的路线。 But if you go to the main route you have to go to the first child route of the main route.
但是,如果您要转到主要路线,则必须转到主要路线的第一个子路线。 Like this:
像这样:
http://localhost:4200/instellingen/account HTTP://本地主机:4200 / instellingen /帐户
But now it goes to this: 但是现在,它去了:
http://localhost:4200/instellingen/instellingen/account HTTP://本地主机:4200 / instellingen / instellingen /帐户
I tried a lot and googled a lot 我尝试了很多,谷歌了很多
So I have this in the app.routes.ts file: 所以我在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 谢谢
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)
And this is how the navigation component looks like: 这是导航组件的外观:
<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>
follow below changes 遵循以下更改
{
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 },
]
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.