ngx-toastr:如何在自定义吐司组件中获取当前的烤面包Id

Question

按一下祝酒词内的一个按钮，我想要关闭那个特别的祝酒词。我想知道在下面的自定义土司组件中获取土司Id的方法是我的代码

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

Answer 1

根据我的理解，您需要tostr的id，因为您需要关闭特定id的toastr。在这里，我有一个解决方案，您可以通过这个解决方案定制您想要的烤面包。

要做到这一点，您需要制作一个自定义toastr组件&在TOASTR中初始化。

component.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 -->

component.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组件中添加自定义组件，如下所示：

module.ts

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