如何在 Angular 9 中添加烤面包机 - Javascript

简介

烤面包机是一个常见的 UI 组件，它能够弹出提示信息，让用户了解当前操作的结果。在 Angular 中，我们可以使用 ng-bootstrap 库来实现烤面包机，它能够提供一些基本的烤面包机组件，并且易于使用和自定义。本篇文章将介绍如何在 Angular 9 中添加烤面包机。

步骤

步骤1：安装 ng-bootstrap

首先，我们需要安装 ng-bootstrap 库。使用以下命令来安装：

npm install --save @ng-bootstrap/ng-bootstrap

步骤2：导入模块

在 app.module.ts 中导入 NgbModule 模块：

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgbModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

步骤3：创建烤面包机服务

创建名为 ToastService 的服务：

import { Injectable } from '@angular/core';
import { NgbToastService } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class ToastService {

  constructor(private ngbToastService: NgbToastService) { }

  showSuccess(message: string, delay?: number) {
    this.ngbToastService.show(message, { delay, toastClass: 'bg-success text-white' });
  }

  showError(message: string, delay?: number) {
    this.ngbToastService.show(message, { delay, toastClass: 'bg-danger text-white' });
  }

}

步骤4：使用烤面包机服务

在组件中使用 ToastService：

import { Component } from '@angular/core';
import { ToastService } from './toast.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="showSuccess()">Show Success Toast</button>
    <button (click)="showError()">Show Error Toast</button>
  `
})
export class AppComponent {

  constructor(private toastService: ToastService) { }

  showSuccess() {
    this.toastService.showSuccess('This is a success toast!', 3000);
  }

  showError() {
    this.toastService.showError('This is an error toast!');
  }

}

步骤5：自定义样式

可以在 styles.css 中自定义烤面包机的样式：

.toast {
  position: fixed;
  top: 80px;
  right: 0;
}

.bg-success {
  background-color: #28a745 !important;
}

.bg-danger {
  background-color: #dc3545 !important;
}

结论

现在，您已经学习了如何在 Angular 9 中添加烤面包机。使用 ng-bootstrap 库，您可以轻松地添加自定义烤面包机组件，并使用 ToastService 服务在组件中实现烤面包机功能。