Как предотвратить поведение по умолчанию для щелчка роутера в угловом приложении?

Question

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

<!-- option 1 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation()">Properties
</a>
<!-- option 2 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.stopPropagation();false">Properties
</a>
<!-- option 3 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault()">Properties
</a>
<!-- option 4 -->
<a class="nav-link" [routerLink]='["/properties", sessionId]'
 (click)="$event.preventDefault();false">Properties
</a>

Создание метода для обработчика в component.ts и вызов любой функции с возвращением false или без него также не работает.

Кроме того, я не хочу отключать ссылку, поскольку ее нужно перетаскивать / открывать в другой вкладке / окне браузера.

РЕДАКТИРОВАТЬ: Вот https://github.com/angular/angular/issues/21457, и я могу заставить его работать, добавив элемент внутри якоря и щелкнув по внутреннему элементу следующим образом:

(click)="$event.stopPropagation();$event.preventDefault()"

В моем примере с реальным миром внутри якоря есть иконка с матом, поэтому я использую ее, но в ссылке выше указана область внутри.

Answer 1

Причина, по которой routerLink не соблюдает предотвращение По умолчанию, описана здесь .

Решение состоит в том, чтобы создать внутренний элемент для привязки, если его еще нет (например, значок).В приведенной выше ссылке внутри создается промежуток, но у меня есть значки внутри якорей, которые для ясности опущен в вопросе:

  <a class="nav-link" [routerLink]='["/map", sessionId]'>
    <mat-icon class="tab-nav-item-icon" (click)="$event.stopPropagation();$event.preventDefault()">map</mat-icon>
  </a>