angular - ngx-toastr：如何在自定义 toast 组件中获取当前的 toast Id

Question

单击吐司内的按钮时，我想关闭该特定吐司。我想知道一种在自定义 toast 组件中获取 toast Id 的方法下面是我的代码

action(btn: IToastButton) {
 enter code hereevent.stopPropagation();
 this.toastPackage.triggerAction(btn);
 this.toastrService.remove(toastID);
 return false;
}

Answer 1

根据我的理解，您需要idtostr 因为您需要关闭该特定 ID 的 toastr。在这里，我有解决方案，您可以根据需要自定义 toastr。

为此，您需要制作一个CUSTOM TOASTR 组件并在 toastr 中初始化。

组件.html

<!-- custom toastr -->
<div class="row" [style.display]="state.value === 'inactive' ? 'none' : ''">
  <div class="col-9">
    <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
      {{ title }}
    </div>
    <div *ngIf="message && options.enableHtml" role="alert" aria-live="polite"
      [class]="options.messageClass" [innerHTML]="message">
    </div>
    <div *ngIf="message && !options.enableHtml" role="alert" aria-live="polite"
      [class]="options.messageClass" [attr.aria-label]="message">
      {{ message }}
    </div>
  </div>
  <div class="col-3 text-right">
    <a *ngIf="options.closeButton" (click)="remove()" class="btn btn-sm font-medium-3">
      &#10005;
    </a>
  </div>
</div>
<div *ngIf="options.progressBar">
  <div class="toast-progress" [style.width]="width + '%'"></div>
</div>
<!--/ custom toastr -->

组件.ts

import { Component } from '@angular/core';

import { Toast, ToastrService, ToastPackage } from 'ngx-toastr';
import { toastrSlideY } from './custom-toastr.animation';

@Component({
  selector: '[app-custom-toastr-component]',
  templateUrl: './custom-toastr.component.html',
  animations: [ toastrSlideY ],
  preserveWhitespaces: false
})
export class CustomToastrComponent extends Toast {

  constructor(
    protected toastrService: ToastrService,
    public toastPackage: ToastPackage
  ) {
    super(toastrService, toastPackage);
  }

}

toastr.component.ts

  // initializing custom toastr 
  toastr() {
    const customToastrRef = cloneDeep(this.options);
    customToastrRef.toastComponent = CustomToastrComponent;
    customToastrRef.closeButton = true;
    customToastrRef.tapToDismiss = false;
    this.toastr.success(
      'Have fun storming the castle!',
      'Slide Down / Slide Up!',
      customToastrRef
    );
  }

toastr.component.html

<button class="btn btn-outline-warning" (click)="toastr()">Toastr</button>

注意：确保在 entery 组件中添加自定义组件，如下所示：

模块.ts

declarations: [
ToastrComponent,
CustomToastrComponent,
],
entryComponents: [CustomToastrComponent]