Angular 5中如何基于场景修改ngx-toastr特定提示框位置

我明白你想要针对不同类型的toastr提示设置不同位置的需求，其实ngx-toastr本身支持在调用时传入局部配置覆盖全局默认值，正好能满足你的场景。下面是具体实现方案：

方案1：调用时单独指定位置（快速实现） #

你不需要修改全局的ToastrModule.forRoot()配置，只需要在调用error提示时，额外传入positionClass参数即可覆盖默认位置，让错误提示固定显示在顶部。

比如在组件中这样调用：

import { ToastrService } from 'ngx-toastr';

constructor(private toastr: ToastrService) {}

// 错误提示：显示在顶部居中
showErrorToast() {
  this.toastr.error('这是一条错误提示', '错误', {
    positionClass: 'toast-top-center', // 你可以根据需求换成toast-top-right/toast-top-left
    // 其他你需要的局部配置，比如timeOut等
  });
}

// 普通成功提示：依然使用全局默认位置
showSuccessToast() {
  this.toastr.success('操作成功', '成功');
}

ngx-toastr提供的顶部相关位置类有：

• toast-top-right（默认顶部右侧）
• toast-top-left
• toast-top-center
• toast-top-full-width（顶部通栏）

方案2：封装自定义Toastr服务（统一管理） #

如果你的项目中有大量错误提示需要统一设置位置，建议封装一个自定义服务，避免重复写配置：

1. 创建custom-toastr.service.ts：

import { Injectable } from '@angular/core';
import { ToastrService, IndividualConfig } from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class CustomToastrService {
  // 错误提示的固定配置
  private errorConfig: Partial<IndividualConfig> = {
    positionClass: 'toast-top-center',
    timeOut: 5000 // 可以额外设置错误提示的超时时间等
  };

  constructor(private toastr: ToastrService) {}

  // 封装错误提示方法
  error(message: string, title?: string) {
    this.toastr.error(message, title, this.errorConfig);
  }

  // 其他提示类型沿用全局配置
  success(message: string, title?: string) {
    this.toastr.success(message, title);
  }

  info(message: string, title?: string) {
    this.toastr.info(message, title);
  }

  warning(message: string, title?: string) {
    this.toastr.warning(message, title);
  }
}

2. 在组件中使用自定义服务：

import { CustomToastrService } from './custom-toastr.service';

constructor(private customToastr: CustomToastrService) {}

showError() {
  this.customToastr.error('系统异常，请稍后重试', '错误');
}

这样所有错误提示都会自动显示在你指定的顶部位置，其他类型提示保持全局默认配置即可。

内容的提问来源于stack exchange，提问作者onmyway