时间戳

首页 > 解决方案 > 如何在 HTML 中声明指向默认插座中路由的链接，在 Angular 中保留命名插座中的路由

angular - 如何在 HTML 中声明指向默认插座中路由的链接，在 Angular 中保留命名插座中的路由

问题描述

以下锚点的href将导航到路由blopp（在默认路由器出口中呈现）和shazoo（在名为hazaa的路由器中呈现）。

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

假设它已被点击，我想让另一个锚导航到路由flopp（重新呈现默认出口）但保持部分shazoo:hazaa不变（重新呈现命名出口或根本不更新再现）。

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

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

实现此目的的一种方法是以编程方式获取单击并使用脚本在路由器实例中设置值。但是，我想从 HTML 中做到这一点，即通过类似下面的伪代码（这里的inherit意思是，不要篡改）。

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

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

标签： angulartypescriptangular-routingrouter-outlet

解决方案

从此链接中，您可以使用 .ts 获取它-我在参数中找不到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

推荐阅读