ngx-toast:如何在自定义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

根据我的理解，您需要tostr的id，因为您需要关闭特定id的烤面包机。这里有一个解决方案，您可以根据需要自定义烤面包机。

要做到这一点，您需要制作一个CUSTOM 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 -->

组件.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);
}
}

烤面包机组件.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
);
}

toast组件.html

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

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

模块.ts

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