Как импортировать ouibounce в Angular 6

Я создал полный рабочий пример на GitHub.

Основные моменты для вашего вопроса заключаются в следующем.

В каталоге проекта запустите: npm install --save ouibounce

Затем, чтобы использовать его в компоненте, вам нужно будет дать ему ссылку на элемент dom. Я делаю это с помощью декоратора Angular ViewChild.

В файле app.component.ts у меня есть:

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

import * as ouibounce from 'ouibounce';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'ng-ouibounce';
  @ViewChild('modal') modal: ElementRef;

  ngAfterViewInit() {
    ouibounce(this.modal.nativeElement, { aggressive: true });
  }
}

В app.component.html у меня <div #modal class = "modal">hello world!</div>

Атрибут #modal сопоставляется, когда Angular создает компонент приложения и присваивает его значение свойству modal. Это доступно только в определенный момент жизненного цикла компонента, поэтому я обращаюсь к нему с помощью метода ngAfterViewInit.

Я не совсем понимаю библиотеку ouibounce, но помимо настройки событий прослушивания мыши для оценки того, когда мышь уходит со страницы, она, по-видимому, только изменяет отображение элемента, переданного display: block;. У меня есть несколько стилей в файле styles.css, которые просто присутствуют, так что сразу видно, что библиотека работает, когда вы вытаскиваете пример.