Javascript 如何将ouibounce导入到Angular 6

如何将ouibounce npm包导入Angular 6

---

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

我已经在上创建了一个完整的工作示例

你的问题要点如下

在项目目录中运行：

npm安装--save ouibounce

然后，为了在组件中使用它，您需要给它一个对dom元素的引用。我这样做的方式是通过Angular的

ViewChild

decorator

在

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

中，我有

helloworld

当Angular创建AppComponent并将其值分配给
modal
属性时，
#modal
属性将匹配。这仅在组件生命周期中的某一点可用，这就是我在
ngAfterViewInit
方法中访问它的原因

我不完全理解
ouibounce
库，但除了设置鼠标监听事件以在鼠标离开页面时进行评估外，它似乎只改变了赋予
display:block的元素的显示。我在
styles.css
文件中有许多样式，它们就在那里，因此当您下拉示例时，很明显库正在工作。
Angular 2+或AngularJS？您有两个标签，包括抱歉@vidalsason Angular 6