如何将数据对象传递到ngx-toastr自定义模板并正常解析使用

ngx-toastr 预留了专门的自定义数据传参入口，不需要把对象塞进 message 字段，按以下步骤修改即可：

步骤1：调用 toast 时通过 payload 传递自定义对象 #

message 参数设计为接收字符串类展示内容，自定义数据统一放在配置项的 payload 字段中：

const DATA = {name:"Ron", site:"www.google.com"}

showWarning(DATA, title) {
    this.toastr.warning('', title, { // message 可留空或填默认提示文本
      tapToDismiss: false,
      extendedTimeOut: 500000,
      timeOut: 1000000,
      progressBar: true,
      closeButton: true,
      enableHtml: true,
      payload: DATA // 新增这行，传递你的自定义对象
});

步骤2：自定义 Toast 组件中接收 payload 数据 #

直接从 toastPackage.config 中取 payload 即可，不需要序列化/反序列化操作：

export class PinkToast extends Toast {
  // 新增属性存储自定义数据，可根据需求定义具体接口类型替换any
  customData: any;

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage,
  ) {
    super(toastrService, toastPackage);
    // 接收传递的自定义对象
    this.customData = this.toastPackage.config.payload;
  }
}

步骤3：模板中直接使用自定义数据 #

修改模板中需要展示字段的位置，使用可选链避免数据为空时报错：

<!-- 把原来的 {{ message }} 替换为对应字段即可 -->
{{ customData?.name }} 
{{ customData?.site }}

原方案失效原因说明 #

你直接把对象传给 message 参数时，ngx-toastr 内部会自动将其转为 [object Object] 格式的普通字符串，并非你预期的序列化结果，因此后续反序列化操作无法还原原始对象。

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