npm 包 @raisiqueira/ng-toast-cdk 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端页面展示提示信息是非常常见的，为了避免重复造轮子，前端开发者们开发了很多优秀的第三方组件库。

@raisiqueira/ng-toast-cdk 是一个简单易用的 Angular Toast 组件库。该库提供了一套基于 Angular CDK 的模板方法生成 Toast，可以轻松应对常见的展示需求。

本篇文章介绍了 npm 包 @raisiqueira/ng-toast-cdk 的使用方法，适合初学者参考使用。

安装

npm install --save @raisiqueira/ng-toast-cdk

引入

在 Angular 项目的 app.module.ts 文件中添加：

import { NgToastCdkModule } from '@raisiqueira/ng-toast-cdk';

@NgModule({
  imports: [
    NgToastCdkModule
  ]
})
export class AppModule { }

使用

@raisiqueira/ng-toast-cdk 提供了 NgToastService 和 NgToastRef 两个服务参与 Toast 的生成。

NgToastService

通过 NgToastService 发起 Toast 的展示。下面是 NgToastService 的方法：

`show(message: string, config?: ToastConfig): NgToastRef`

展示一个 Toast，返回 NgToastRef 实例。

message: Toast 展示的文本信息。
config: Toast 的配置选项，具体见下面的配置项。默认为 ToastConfig 的一个实例。

interface ToastConfig {
  duration?: number; // 展示时长，默认为 3000ms
  position?: 'top' | 'bottom'; // 展示位置，默认为 'bottom'
  classes?: string[]; // 添加类样式
  hasBackdrop?: boolean; // 是否显示背景透明遮罩层，默认为 true
}

示例代码：

import { NgToastService } from '@raisiqueira/ng-toast-cdk';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent {

  constructor(private ngToastService: NgToastService) {}

  showToast() {
    const toastRef = this.ngToastService.show('Hello, Toast!');
  }
}

NgToastRef

NgToastRef 实例持有了当前展示的 Toast 对象。可以通过该实例对 Toast 进行关闭、重新设置、添加类样式等操作。下面是 NgToastRef 的方法：

`close()`

关闭当前 Toast。

const toastRef = this.ngToastService.show('Hello, Toast!');
toastRef.close();

`setMessage(message: string)`

更改正在展示的 Toast 文本信息。

const toastRef = this.ngToastService.show('Hello, Toast!');
toastRef.setMessage('Welcome to NG Toast!');

`addClass(...classNames: string[])`

为当前 Toast 添加类样式。

const toastRef = this.ngToastService.show('Hello, Toast!');
toastRef.addClass('my-toast-class');

`removeClass(...classNames: string[])`

为当前 Toast 移除某个类样式。

const toastRef = this.ngToastService.show('Hello, Toast!');
toastRef.removeClass('my-toast-class');

总结

本文介绍了 @raisiqueira/ng-toast-cdk 的使用方法。通过本文的学习，读者可以掌握 @raisiqueira/ng-toast-cdk 的主要功能和 API 接口。在后续的开发过程中，读者可以依据项目需求进行相关的配置和调整，灵活地使用这一强大的组件库。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673defb81d47349e53bab