ngx-sonner安装与配置指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00740/article/details/146529123

ngx-sonner安装与配置指南

ngx-sonner An opinionated toast component for Angular. A port of @emilkowalski's sonner. 项目地址: https://gitcode.com/gh_mirrors/ng/ngx-sonner

1. 项目基础介绍

ngx-sonner 是一个为 Angular 应用程序设计的 Toast 组件。Toast 组件通常用于在不打断用户操作流程的情况下显示通知信息。这个项目是基于 React 的 sonner 组件的一个 Angular 端口。

主要编程语言：TypeScript（Angular 的主要开发语言）

2. 关键技术和框架

Angular：一个用于构建客户端应用程序的框架。
TypeScript：由微软开发的一种由 JavaScript 发展而来的编程语言，它为 JavaScript 提供了可选的静态类型和基于类的面向对象编程。
Angular CDK（Component Development Kit）：一套工具集，用于构建 Angular 组件。

3. 安装和配置

准备工作

在开始之前，请确保您的开发环境中已经安装了以下工具：

Node.js：JavaScript 运行时环境，用于运行 Angular CLI。
Angular CLI：Angular 的命令行界面，用于初始化、开发、构建和测试 Angular 应用程序。

安装步骤

安装 ngx-sonner

在您的 Angular 项目中，使用以下命令之一安装 ngx-sonner：

npm i ngx-sonner
# 或者
yarn add ngx-sonner
# 或者
pnpm add ngx-sonner
# 或者
bun add ngx-sonner

在 Angular 组件中引入 ngx-sonner

打开您想要显示 Toast 的 Angular 组件文件（例如 app.component.ts），然后在组件的 @Component 装饰器中的 imports 数组中添加 NgxSonnerToaster：

import { Component } from '@angular/core';
import { NgxSonnerToaster } from 'ngx-sonner';

@Component({
  selector: 'app-root',
  imports: [
    NgxSonnerToaster
  ],
  template: `
    <ngx-sonner-toaster></ngx-sonner-toaster>
    <button (click)="toast('我的第一个 Toast')">给我一个 Toast</button>
  `
})
export class AppComponent {
  protected readonly toast = toast;
}

使用 ngx-sonner 显示 Toast

在您的组件类中，可以使用 toast 函数来显示 Toast。例如：
```
import { toast } from 'ngx-sonner';

export class AppComponent {
  protected readonly toast = toast;
}
```
然后，在您的组件模板中，可以像下面这样调用 toast 方法：
```
<button (click)="toast('这是一个 Toast')">显示 Toast</button>
```
配置 ngx-sonner

您可以通过向 <ngx-sonner-toaster> 组件添加属性来自定义 Toast 的行为和样式。例如，要更改 Toast 的主题和位置，可以这样做：
```
<ngx-sonner-toaster theme="dark" position="top-center"></ngx-sonner-toaster>
```