У меня есть следующая страница в моем проекте Ionic / Angular:
<nav mat-tab-nav-bar>
<a mat-tab-link [routerLink]="['./', { outlets: { sub: ['a'] } }]"
routerLinkActive #a="routerLinkActive"
[active]="a.isActive">
A
</a>
<a mat-tab-link [routerLink]="['./', { outlets: { sub: ['b'] } }]"
routerLinkActive #b="routerLinkActive"
[active]="b.isActive">
B
</a>
<a mat-tab-link [routerLink]="['./', { outlets: { sub: ['c'] } }]"
routerLinkActive #c="routerLinkActive"
[active]="c.isActive">
C
</a>
<a mat-tab-link [routerLink]="['./', { outlets: { sub: ['d'] } }]"
routerLinkActive #d="routerLinkActive"
[active]="d.isActive">
D
</a>
</nav>
<router-outlet name="sub"></router-outlet> <!-- Nested Router inside another router-outlet -->
Теперь мой app-routing.module.ts
выглядит так:
{ path: 'test/:testid/other/:newid',
component: ABCDPage,
children: [
{ path: 'a', loadChildren: './a/a.module#APageModule', outlet: 'sub' },
{ path: 'b', loadChildren: './b/b.module#BPageModule', outlet: 'sub' },
{ path: 'c', loadChildren: './c/c.module#CPageModule', outlet: 'sub' },
{ path: 'd', loadChildren: './d/d.module#DPageModule', outlet: 'sub' },
]
}
Angular хорошо отображает href
тегов a
при загрузке страницы:
/test/47839743/other/4738933/(sub:a)
/test/47839743/other/4738933/(sub:b)
/test/47839743/other/4738933/(sub:c)
/test/47839743/other/4738933/(sub:d)
Однако после маршрутизации (успешно) href
на тегах a
выглядит следующим образом:
/test/47839743/other/4738933/(sub:b)
/test/47839743/other/4738933/(sub:b)
/test/47839743/other/4738933/(sub:b)
/test/47839743/other/4738933/(sub:b)
Где b
была ссылка, по которой я щелкал. Что происходит и почему Angular меняет мои маршруты?