ngx-toastr: как получить текущий идентификатор тоста внутри пользовательского компонента тоста - PullRequest
Новая
       19

ngx-toastr: как получить текущий идентификатор тоста внутри пользовательского компонента тоста

1 голос
/ 09 июля 2020

При нажатии кнопки внутри тоста я хочу закрыть этот конкретный тост. Я хочу знать, как получить идентификатор тоста внутри пользовательского компонента тоста. Ниже мой код 

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

1 Ответ

0 голосов
/ 09 июля 2020

Насколько я понимаю, вам нужен id tostr, потому что вам нужно закрыть тостер с этим идентификатором c id. Здесь у меня есть решение, с помощью которого вы можете настроить тостер по своему усмотрению.

Для этого вам нужно создать компонент 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 -->

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