Angular - 当子组件仍在加载时，父组件卡住

Question

我有一个父组件和一个子组件（基本上是一个上下文菜单）。
当我右键单击父表行时，子组件显示为上下文菜单。
当我单击上下文菜单上的链接时，它会在新选项卡中打开链接。
到目前为止还可以，但问题是，在新页面完成加载之前，我无法在父页面上单击或进行任何交互。我该如何预防呢？

这是父组件表格行的代码

 <tr (contextmenu)="onrightClick($event,rowData['id'])">


 onrightClick(event, data) {
        event.preventDefault();
        this.contextmenuX = event.clientX;
        this.contextmenuY = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        this.contextMenuRouterLink = 'myLink/' + data;
        this.contextmenu = true;
    }
    //disables the menu
    disableContextMenu() {
        this.contextmenu = false;
    }

这就是我在父页面中添加子组件（上下文菜单）的方式

<div *ngIf="contextmenu">
    <app-context-menu-open-in-new-tab [x]="contextmenuX" [y]="contextmenuY" [routerLink]="contextMenuRouterLink" (disableContextMenu)="disableContextMenu()"></app-context-menu-open-in-new-tab>
</div>

这是子组件的代码
注意：我使用 eventEmitter 来关闭父页面的上下文菜单。

<div class="contextmenu" [ngStyle]="{'left.px': x, 'top.px': y}">
    <a (click)="onLinkClick($event);" href="{{routerLink}}" target="_blank">Open your data in new tab</a>
</div>

 onLinkClick(event) {
       this.disableContextMenu.emit(null);
       event.stopPropagation();
    }

Answer 1

你可以添加

rel="noopener" to you link

这可以防止源页面一直等待新页面完成加载/执行。