Angular - 导航到新选项卡/窗口时辅助路由器出口保留在 URL 中

Question

我对角度辅助路由器出口（命名出口 - https://angular.io/guide/router-tutorial-toh#displaying-multiple-routes-in-named-outlets）有问题。

我面临的问题是，每当指定出口处于活动状态时，例如：http://myRoute1(popup:myRoute2)，然后我尝试使用 ctrl/shift 修饰符（新选项卡/窗口）导航到 routerLink 的另一条路线)...指定的出口仅保留在 URL 中。

例如：[routerLink]="['myOtherRoute']" 在新窗口/选项卡中生成 http://myOtherRoute(popup:myRoute2) 的 URL。

有什么方法可以省略此行为而不编写自定义 URL 序列化程序，然后在窗口中导航？

Answer 1

我们可以在导航期间将命名插座设置为

null

，这将确保命名插座从URL中删除

<hello name="{{ name }}"></hello>
<a
  [routerLink]="[
    { outlets: { primary: ['products', '1'], sidebar: ['products', '2'] } }
  ]"
  [queryParamsHandling]="''"
  [queryParams]="{ productId: 1 }"
  >Product</a
>
<a
  [routerLink]="[{ outlets: { primary: ['products', '1'], sidebar: null } }]"
  [queryParams]="{ productId: 1 }"
  >Product</a
>
<div class="row">
  <div class="col-8">
    <router-outlet></router-outlet>
  </div>
  <div class="col-4">
    <router-outlet name="sidebar"></router-outlet>
  </div>
</div>

堆栈闪电战