javascript - 如何将ouibounce导入到Angular 6

如何将ouibounce npm包导入Angular 6？

ouibounce GitHub repo

ouibounce npm package

请帮助我了解如何将ouibounce npm软件包导入angular。我可以通过npm安装它，但不知道如何导入。

最佳答案

我已经在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>
当Angular创建AppComponent并将其值分配给#modal属性时，modal属性得到匹配。这仅在组件生命周期中的某个时间点可用，这就是为什么我要在ngAfterViewInit方法中访问它。

我不完全了解ouibounce库，但是除了设置鼠标侦听事件以评估鼠标何时离开页面外，它似乎仅更改为display: block;提供的元素的显示。我在styles.css文件中有很多样式，因此当您下拉示例时，很明显该库正在工作。