如何将ouibounce导入Angular 6答案

【问题标题】：how to import ouibounce to Angular 6如何将ouibounce导入Angular 6
【发布时间】：2019-04-03 17:27:12
【问题描述】：

如何将 ouibounce npm 包导入 Angular 6？

ouibounce GitHub repo

ouibounce npm package

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

【问题讨论】：

Angular 2+ 还是 AngularJS？你有两个标签
对不起@vidalsasoon Angular 6

标签： javascript angular npm npm-scripts

【解决方案1】：

我在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 库，但除了设置鼠标监听事件以评估鼠标何时离开页面外，它似乎只改变了它提供给 @987654332 的元素的显示@。我在styles.css 文件中有许多样式，它们就在那里，因此当您拉下示例时，很明显库正在工作。

【讨论】：