以角度安装 sweetalert2

如果你正在使用 Angular 框架，想要使用 SweetAlert2（以下简称 swal）来美化弹出框，那么这篇文章就是为你准备的。

1. 安装

首先，你需要在你的项目中添加 SweetAlert2 库。你可以通过以下命令来安装：

npm install sweetalert2

2. 导入 sweetalert2

接下来，在你的 app.module.ts 文件中，添加以下代码导入 sweetalert2：

import { SweetAlert2Module } from '@sweetalert2/ngx-sweetalert2';

@NgModule({
  imports: [
    //...
    SweetAlert2Module.forRoot()
  ],
  // ...
})
export class AppModule { }

3. 使用 swal

现在，你已经完成了 SweetAlert2 库的安装和导入。现在，你可以在你的组件中使用 swal 来显示弹出框了。例如，在 example.component.ts 文件中，你可以添加以下代码：

import { Component } from '@angular/core';
import Swal from 'sweetalert2';

@Component({
  selector: 'app-example',
  template: `
    <button (click)="openAlert()">Show alert</button>
  `,
})
export class ExampleComponent {

  openAlert() {
    Swal.fire('Hello world!');
  }

}

现在，当你点击 Show alert 按钮时，就会弹出一个带有 Hello world! 文字的 swal 弹出框。

4. 总结

通过本篇文章，你已经学会了如何在 Angular 中安装和使用 SweetAlert2 库。通过这些基础知识，你可以进一步了解更多 swal 的高级用法，例如自定义 swal 的样式，创建不同类型的 swal 弹出框等等。如果你想深入学习，可以查看 SweetAlert2 的官方文档。