как импортировать ouibounce в Angular 6 - PullRequest
Новая
       10

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

0 голосов
/ 30 октября 2018

как импортировать пакет ouibounce npm в Angular 6?

oubounce GitHub repo

Пакет nibounce npm

Пожалуйста, помогите мне узнать, как импортировать пакет ouibounce npm в angular. Я могу установить его через npm, но не знаю, как его импортировать.

1 Ответ

0 голосов
/ 30 октября 2018

Я создал полный рабочий пример на 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 создает AppComponent и присваивает его значение свойству modal. Это доступно только в определенный момент жизненного цикла компонента, поэтому я обращаюсь к нему по методу ngAfterViewInit.

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

...