Как я могу постоянно закрывать всплывающие подсказки в приложении Angular, когда пользователь нажимает вне подсказки?

Question

Обзор

Мне нужна помощь в понимании того, как лучше структурировать приложение Angular для работы с подсказками Bootstrap 3 и устранить обнаруженный мной дефект.Я использую пользовательский фреймворк на основе Bootstrap 3, поэтому я не могу использовать реализацию Angular.Это означает, что я должен использовать jQuery для инициализации и скрытия / уничтожения подсказок.Я успешно заставил это работать, но это вызвало периодический дефект, когда всплывающие подсказки иногда не закрываются при нажатии в другом месте приложения.

Что я сделал

Мое приложение загружаетсяJQuery и наши пользовательские рамки хорошо.У меня есть директива, которая инициализирует всплывающую подсказку при обнаружении в любом компоненте / модуле.В основном компоненте приложения я проверяю наличие кликов в документе и закрываю все всплывающие подсказки, когда щелчок обнаруживается в любом месте за пределами всплывающей подсказки или элемента формы.

source: tooltip.directive.ts

import { AfterViewChecked, Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[data-toggle="tooltip"]'
})
export class TooltipDirective implements AfterViewChecked {
  constructor(private el: ElementRef) {
  }

  ngAfterViewChecked(): void {
    const that = this;

    // initialize tooltip
    $(that.el.nativeElement).tooltip(); 
  } 
}

источник: app.component.ts

...
// listen for all clicks
@HostListener('document:click', ['$event', '$event.target'])
public onClick(event: MouseEvent, targetElement: HTMLElement): void {
  if (!targetElement) {
    return;
  }

  var tag = targetElement.tagName;

  // check if clicked target is not a tooltip
  if (targetElement.dataset.toggle !== 'tooltip') {
    // check if the tag is an unacceptable area to use with a tooltip
    if ((tag !== 'SELECT') && (tag !== 'INPUT') && (tag !== 'TEXTAREA')) {
      // destroy all tooltips;
      // tooltip('hide') cannot be used because it requires 
      // a double-click to get the tooltip to show again
      $('[data-toggle="tooltip"]').tooltip('destroy');
    }
  }
}
...

Проблема

В некоторых областях, особенно при навигации по сайту,всплывающие подсказки останутся на экране при нажатии на элемент меню навигации.Иногда они закрыты.Если бы это было проблемой в приложении со статической страницей, это было бы похоже на тот тип дефекта, который встречается с проблемой синхронизации для DOM, не готового до выполнения действия закрытия.Поскольку проблема временная, я чувствую, что проблема вызвана плохой реализацией закрытия (уничтожения) всех всплывающих подсказок и управления DOM в Angular.

Обновление: После дальнейшего изучения,Вот исходный код навигационной ссылки, которая нарушает функциональность закрытия всплывающих подсказок:

<li *ngIf="(userRole?.editor || userRole?.author)" routerLinkActive="active">
  <a id="site-nav-overview" routerLink="/overview">
    Overview <span class="sr-only">(current)</span>
  </a>
</li>

Может ли маршрутизатор или ngI обойти функцию закрытия всплывающей подсказки приложения?Если да, то как мне решить эту проблему с помощью моего текущего кода?

Вопросы

1. Что является более эффективным и оптимальным способом нацеливания на все подсказки в DOM от всех компонентов / модулей впредставление и закрытие их последовательно?
2. Было бы лучше или сложнее создать массив объектов для отслеживания всех открытых всплывающих подсказок и повторного использования для их закрытия?
3. Как можноЯ поместил эту функциональность в директиву подсказки?Есть ли оптимальный путь?Не имеет смысла дублировать проверку документа / окна на клики для каждого экземпляра всплывающей подсказки.