角度：路由器链接在嵌套路由器中路由后发生更改

Question

我的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会改变我的路线？