Angular - родительский компонент завис, когда дочерний компонент все еще загружается - PullRequest
0 голосов
/ 08 мая 2020

У меня есть родительский и дочерний компоненты (в основном контекстное меню).
Когда я щелкаю правой кнопкой мыши по строке родительской таблицы, дочерний компонент отображается как контекстное меню.
Когда я нажимаю ссылку на в контекстном меню открывается ссылка в новой вкладке.
Пока все в порядке, но проблема в том, что я не могу щелкнуть или выполнить какое-либо взаимодействие на родительской странице до завершения загрузки новой страницы. Как я могу предотвратить это?

Это код для строки таблицы родительского компонента

 <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();
    }

1 Ответ

1 голос
/ 08 мая 2020

вы можете добавить

rel="noopener" to you link

Это предотвращает то, что исходная страница продолжает ждать завершения новой страницы. sh загрузка / выполнение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...