如何解决如何在 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。