如何在 Angular 9 中安装 popper.js - Javascript

简介： 在本文中，我们将学习如何在Angular 9应用程序中安装和使用popper.js。

步骤 1: 安装 popper.js

我们可以使用npm在Angular 9中安装popper.js。

npm install popper.js --save

步骤 2: 引入 popper.js

在我们的Angular 9组件中，我们可以引入popper.js。

import { popper } from 'popper.js';

步骤 3: 使用 popper.js

我们可以在Angular 9组件中使用popper.js创建弹出窗口。

例如，以下是如何在组件中创建一个提示框：

<button #myBtn (click)="togglePopper()">Click me</button>

<div #popperContent>{{popperContent}}</div>

<div class="popper" [hidden]="!visible" popper [popperContent]="popperContent"
    [popperTrigger]="myBtn.nativeElement" [popperPlacement]="'bottom'">
</div>

上面的代码示例说明了如何在Angular 9中创建popper.js提示框。

步骤 4: 运行应用程序

安装，引入和使用popper.js后，运行Angular 9应用程序。您将看到一个弹出框提示框，当您单击按钮时，它将显示在底部。

结论

恭喜！我们已经学习了如何在Angular 9中安装和使用popper.js。popper.js非常有用，我们可以使用它来创建各种弹出框和提示框。

参考资料

1. Popper.js. (n.d.). Popper.js Documentation. Retrieved from https://popper.js.org/
2. Hage, J. (2019, January 23). How to integrate Popper.js with Angular 6/7/8. Retrieved from http://jakehage.com/blog/2019/01/23/how-to-integrate-popper-js-with-angular-6-7-8/