如何在 HTML 中声明一个链接到默认出口中的路由，并保留 Angular 中命名出口中的路由

问题描述

以下锚点的 href 将导航到路由 blopp（在默认路由器出口中渲染）和 shazoo（在名为 哈扎).

<a href="blopp(hazaa:shazoo)">bloppify with shazoo</a>

假设它已被点击，我希望有另一个锚导航到路由 flopp（重新渲染默认插座）但保持部分 shazoo:hazaa 不变（或者重新呈现指定的插座或根本不更新呈现）。

它不适用于下面的标签，因为我们不能确定指定的路由器总是会渲染 shazoo（因为我们可能会到达 flopp 来自第一部分提到的其他地方。

<a href="flopp(hazaa:shazoo)">floppify with something</a>

实现这一目标的一种方法是 programmatically snatching the click 并使用脚本在路由器实例中设置一个值。但是，我想从 HTML 中做到这一点，即通过类似于以下伪代码的内容（其中 inherit 表示 按原样，不要篡改）。

<a href="blopp(hazaa:inherit)">bloppify with shazoo</a>

有可能吗？如果有，怎么做？我发现它的样本/博客数量为零，并且命名的网点并没有得到很好的例证。

解决方法

从 this link 你可以使用 .ts -I can't find in routerLink一个参数来指示“路由出口”-

 <a class="nav-link" (click)="secondaryNav('chat')">Chat</a>

secondaryNav(path) {
    this.router.navigate([{ outlets: {
      sidebar: [path]
    }}]);
  }

我认为，如果它不是很受欢迎，是因为通常可以用另一种方式解决（例如，请参阅更新的答案），而且实际上是一个带括号的“有点外化”方向

更新假设您有一个主应用

 <auxiliar-router></auxiliar-router>
 <router-outlet><router-outlet>

我们的 AuxiliarRouterComponent 就像

    <ng-container *ngIf="{auxroute:serviceRoute.route$|async} as route">
      <app-component-one *ngIf="route.auxroute=="one"></app-component-one>
      <app-component-two *ngIf="route.auxroute=="two"></app-component-two>
      <app-component-three *ngIf="route.auxroute=="three"></app-component-three>
    </ng-container>

constructor(public serviceRoute:ServiceRoute){}

我们的 ServiceRoute 有一个主题

route$:Subject<string>=new Subject<string>();

ngOnInit（或其他任何东西）中的任何组件

constructor(private serviceRoute:ServiceRoute){}
ngOnInit(){
  this.serviceRoute.next("one")
}

使 auxiliarRouterComponent 显示 ComponentOne