Angular：单击已选择的父级时如何防止从url中删除子路由的路径答案

【问题标题】：Angular: how to prevent removal of child route's path from url when clicking on the already-selected parentAngular：单击已选择的父级时如何防止从url中删除子路由的路径
【发布时间】：2021-02-28 15:36:18
【问题描述】：

我正在使用，部分：

"@angular/core": "10.2.3",
"@ng-bootstrap/ng-bootstrap": "^7.0.0",
"bootstrap": "^4.5.0",

问题：对于一组顶级“父”选项卡和第二层“子”选项卡 (ngbNav)，在单击子选项卡之后单击原始父选项卡，会删除来自 url 的孩子的路径。

需求：如果我点击父标签，然后点击子标签，再点击相同父标签和之前一样，我不希望将子路径从url中删除。

当前行为示例：

点击“Jobs”父标签，url变为“/jobs”
点击“Filter”子标签，url变为“/jobs/filter”
再次点击“Jobs”父标签，url再次变为“/jobs”

...但我希望 url 保持“/jobs/filter”（并且相应的活动过滤器选项卡保持可见）。换句话说，当第三次点击发生时，什么都不会改变。我希望通过路由器配置而不是某种阻止点击的 javascript 解决方案来实现这一点。

这是我的路线的配置方式：

const routes: Routes = [
  {
    path: 'jobs',
    component: JobsComponent,
    canActivate: [RouteAccess],
    children: [
      {
        path: 'filter',
        component: JobsFilterComponent
      },
      {
        path: 'summary',
        component: JobsSummaryComponent
      }
    ]
  }
];

如果需要，这里是 HTML：

<div class="top-level-tabs">
  <!-- one of the parent tabs -->
  <a class="nav-link" 
     [routerLink]="['/jobs']" 
     [routerLinkActive]="['router-link-active']" 
     [routerLinkActiveOptions]="{exact:false}">JOBS</a>
</div>

。 . .

<nav ngbNav #nav="ngbNav" class="nav-tabs" id="second-tab-set">
  <ng-container ngbNavItem>
    <a ngbNavLink class="tab-height-large" [routerLink]="['/jobs/filter']">Filter</a>
  </ng-container>
  <ng-container ngbNavItem>
    <a ngbNavLink class="tab-height-large" [routerLink]="['/jobs/summary']">Summary</a>
  </ng-container>
</nav>

【问题讨论】：

标签： angular routes ng-bootstrap

【解决方案1】：

您可以应用与 Ionic Framework 对路由器链接所做的相同方法。离子源位于router-link-delegate.ts file。抱歉，我没有时间提供完整的解决方案。它看起来像这样：

@Directive({
  selector: '[routerLink]',
})
export class RouterLinkDelegate {

  constructor(
    private router: Router,
    @Optional() private routerLink?: RouterLink,
  ) {
  }

  /**
   * @internal
   */
  @HostListener('click', ['$event'])
  onClick(ev: UIEvent) {
    if (this.routerLink.routerLink.startsWith(this.router.url)) {
      ev.preventDefault();
    }
  }
}

您可能需要处理检查是否要阻止默认单击处理程序的逻辑。代码完成后，只需将RouterLinkDelegate添加到应该使用此逻辑的模块的声明数组中即可。

【讨论】：