Как сделать так, чтобы routerlink работал как по клику, так и по клику в приложении Angular?

Question

Подобный вопрос задавался несколько раз, но я не могу заставить его работать. Например, здесь - это некоторые ответы, которые не работают для большинства людей. Это не может быть угловой проблемой как таковой, но я пытаюсь решить эту проблему в приложении ng.

Я хочу, чтобы ссылка работала нормально при нажатии. Кроме того, я хочу, чтобы элемент, содержащий ссылку, можно было дважды щелкнуть, чтобы открыть ссылку на разделенную область на стороне маршрутизатора. Итак, в моем меню навигации у меня есть:

    <li *ngIf="propertiesTabVisible"  class="nav-item tab-nav-item"
      [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }' 
      (dblclick)="toggleTab('/properties/' + sessionId)">
      <a class="nav-link" [routerLink]='["/properties", sessionId]'
       [class.disabled]="(propertiesLinkDisabled | async)"
       (click)="navigateWithDelay('/properties/' +sessionId)">
        <mat-icon class="tab-nav-item-icon">assignment</mat-icon>
      </a>
    </li>

и в component.ts:

  private block = true;
  private isCancelled = false;

  private delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  private async sleepExample(url: string) {
    await this.delay(200);
    if (!this.block) {
      this.router.navigate([url]);
    }
  }

  navigateWithDelay(url: string) :boolean {
    this.block = true;
    this.isCancelled = false;
    this.sleepExample(url).then(() => {
      if (!this.isCancelled) {
        this.block = false;
      }
    });
    return false;
  }

  toggleTab(url: string) {
    this.isCancelled = true;
    toggleTabVisibility(url);
  }

Однако это не работает. Несмотря на то, что оба обработчика вызываются, и они функционируют так, как я ожидал, в верхней части этой розетки маршрутизатора работает, поэтому навигация происходит. Как предотвратить распространение клика по ссылке в click-hanlder?

Answer 1

Причина, по которой $ event.stopPropagation () и; $ event.preventDefault () не работают в routerLink, описана здесь .

Вот рабочий пример, когда событие щелчка перемещается вmat-icon внутри якоря и обработчик вызывает оба:

    $event.stopPropagation();
    $event.preventDefault();

.html:

<li *ngIf="propertiesTabVisible"  class="nav-item tab-nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'
(dblclick)="toggleTab('/properties/' +sessionId)">
  <a class="nav-link" [routerLink]='["/properties", sessionId]' [class.disabled]="(propertiesLinkDisabled | async)">
    <mat-icon class="tab-nav-item-icon" (click)="navigateWithDelay($event, '/properties/' +sessionId)">assignment</mat-icon>
  </a>
</li>

.ts:

  toggleTab(url: string) {
    this.isCancelled = true;
    this.ngRedux.dispatch(this.actions.toggleWindowUrl({
      windowId: this.tabService.windowId,
      url: url,
      isSplit: true
    }));
  }

  private isCancelled = false;

  private delay(ms: number) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  private async waitForDoubleClick() {
    await this.delay(200);
  }

  navigateWithDelay($event: any, url: string) {
    this.isCancelled = false;
    $event.stopPropagation();
    $event.preventDefault();
    this.waitForDoubleClick().then(() => {
      if (!this.isCancelled) {
        this.router.navigate([url]);
      }
    });
  }