如何将 uibounce npm 包导入 Angular 6?
请帮我找出如何将 ouibouncing 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>
#modal
当 Angular 创建 AppComponent 并将其值分配给 modal
时,属性会匹配属性(property)。这仅在组件生命周期的某个时刻可用,这就是我在 ngAfterViewInit
中访问它的原因方法。
我不完全理解 ouibounce
库,但除了设置鼠标监听事件以评估鼠标何时离开页面外,它似乎只更改了它提供给 display: block;
的元素的显示。 .我在 styles.css
中有许多样式文件就在那里,这样当您下载示例时,很明显该库正在运行。
关于javascript - 如何将 ouibunce 导入 Angular 6,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53068240/