ngx-toastr 使用教程

ngx-toastr 使用教程

ngx-toastr🍞 Angular Toastr项目地址:https://gitcode.com/gh_mirrors/ng/ngx-toastr

项目介绍

ngx-toastr 是一个用于 Angular 应用程序的非阻塞通知库。它提供了美观的弹出通知，支持自定义样式和动画。该库易于集成，并且可以通过简单的配置实现丰富的功能。

项目快速启动

安装

首先，通过 npm 安装 ngx-toastr：

npm install ngx-toastr --save

配置

在 angular.json 文件中添加样式：

"styles": [
  "node_modules/ngx-toastr/toastr.css"
]

导入模块

在 app.module.ts 中导入 ToastrModule：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserAnimationsModule, // 需要 angular animations
    ToastrModule.forRoot(), // ToastrModule 初始化
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使用示例

在组件中使用 Toastr：

import { ToastrService } from 'ngx-toastr';

export class AppComponent {
  constructor(private toastr: ToastrService) {}

  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
}

应用案例和最佳实践

自定义样式

可以通过覆盖默认的 CSS 样式来自定义 Toastr 的外观：

/* styles.css */
.toast-success {
  background-color: #51A351;
}

高级配置

可以通过 ToastrModule.forRoot 方法传递配置对象来实现更多自定义设置：

ToastrModule.forRoot({
  timeOut: 10000,
  positionClass: 'toast-top-right',
  preventDuplicates: true,
}),

典型生态项目

ngx-toastr 可以与其他 Angular 生态系统中的项目结合使用，例如：

• Angular Material: 结合使用可以提供一致的 UI 体验。
• NGRX: 用于状态管理，可以在状态变化时触发 Toastr 通知。
• Angular Universal: 用于服务器端渲染，确保 Toastr 在服务器端也能正常工作。

通过这些结合使用，可以构建出更加强大和用户友好的 Angular 应用程序。

ngx-toastr🍞 Angular Toastr项目地址:https://gitcode.com/gh_mirrors/ng/ngx-toastr