Angular 模态组件中的 routerLink 指令未按预期工作

Question

我在 NgbModal 中使用 routerLink 指令时遇到了非常奇怪的情况。首先，我有结构如下的功能模块：

-feature/
  -components/
    -popup-component/
      popup-component.ts
    -preferences-component/
      preferences-component.ts
    index.ts
  +containers/
  feature-routing.module.ts
  feature.module.ts

路由定义如下（简化）：

export const routes: Routes = [
  {
    path: '',
    component: ContainerPageComponent
  },
  {
    path: ':id',
    component: AnotherContainerPageComponent,
    children: [
      { path: '', redirectTo: 'some-route' },
      { path: 'preferences', component: PreferencesComponent },
      { path: 'rules/new', component: OtherComponent }
    ]
  }
];

我有一个从首选项组件打开的模式，如下所示：

  addRulePopup() {
    const ref = this.modalService.open(PopupComponent, {
      backdrop: 'static',
      centered: true,
      size: 'lg',
      backdropClass: 'bg-white-opaque force-opaque no-border',
      windowClass: 'no-border'
    });
    ref.result.then(e => {
      console.log(e);
    });
  }

我在打开模式时没有更改 url 所以我建议从路由器的角度来看，当我打开模式时没有任何变化。

在弹出组件和首选项组件中，我都有 link 这样的：

<div class="rule" routerLink="../rules/new">

问题是我从弹出组件被重定向到 404，而从首选项我导航到右侧 url。

问题的描述可能看起来过于复杂，如果您有这样的感觉，我们深表歉意:) 我尽量简化了事情。

Answer 1

我已经通过使用来自控制器的 router.navigate 解决了问题，传递激活的路由实例，如下所示：

this.router.navigate(['../../preferences'], { relativeTo: this.route });

Angular 模态组件中的 routerLink 指令未按预期工作

Angular routerLink directive in modal component not working as expected

typescript

angular

angular-router

angular-routerlink

angular8