为什么有时 toasterService 不显示弹出窗口？

Question

public constructor(
    private toasterService: ToasterService) {
}

然后我听烤面包机：

public ngOnInit() {
this.errorWatcher.localConfigObservable.subscribe(exception => {
      const toast: any = {
        type: exception.type,
        body: Helper.toasterBodyMessages(exception.messages)
      };

      this.toasterService.pop(toast);
    });
}

我使用以下方式发送消息：

public invokeMessageOutside(type: string, title: string, message: any) {
    this.exception.type = type;
    this.exception.title = title;

    if (isArray(message)) {
      this.exception.messages = message;
    } else {
      this.exception.messages.push(message);
    }

    this.call();
  }

  private call(): void {
    this.localConfigObservable.next(this.exception);
  }

所以，我不明白为什么有时显示此弹出窗口，有时不显示。

如果在里面做console.log():

this.errorWatcher.localConfigObservable.subscribe(exception => {
    console.log('Done');
});

它总是有效。

我的配置是：

 public configToaster: ToasterConfig = new ToasterConfig({
    positionClass: "toast-top-right",
    showCloseButton: true,
    preventDuplicates: true,
    timeout: 5000,
    tapToDismiss: false,
    bodyOutputType: BodyOutputType.TrustedHtml,
    mouseoverTimerStop: false
  });

可能问题出在：preventDuplicates: true?

Answer 1

这可能是由于 Angular 生命周期摘要。你应该尝试在你的观察者上添加一些代码。

this.errorWatcher.localConfigObservable.pipe(
  observeOn(asyncScheduler)
).subscribe(exception => {
  const toast: any = {
    type: exception.type,
    body: Helper.toasterBodyMessages(exception.messages)
  };
  this.toasterService.pop(toast);
});

Answer 2

Maybe problem is in: preventDuplicates: true?

是。

我创建了一个简单的项目：

export class AppComponent implements OnInit, OnDestroy {
  isAlive = true;
  public config: ToasterConfig = new ToasterConfig({
    positionClass: "toast-top-right",
    showCloseButton: true,
    preventDuplicates: true,
    timeout: 5000,
    tapToDismiss: false,
    bodyOutputType: BodyOutputType.TrustedHtml,
    mouseoverTimerStop: false
  });

  constructor(
      private service: ToasterService,
      private dataService: DataService,
  ) { }

  public sendMessage(): void { 
      this.dataService.setMessage('success', 'Title text', 'Other text');
  }

  ngOnInit(): void { 
    this.dataService.msgEvent.pipe(
        takeWhile(() => this.isAlive)
    ).subscribe(data => {
        this.showToastMessage(data);
    });
  }

  private showToastMessage(data): void { 
    const toast: any = {
        type: data.type,
        body: data.message
      };

      this.service.pop(toast);
  }

  ngOnDestroy(): void { 
      this.isAlive = false;
  }

}

使用服务（在本例中无用）：

export class DataService {
    private $msg = new Subject<any>();
    public msgEvent = this.$msg.asObservable();

    public setMessage(type: string, title: string, message: any): void {
        this.$msg.next({
            type: type,
            title: title, 
            message: message
        });
    }
}

第一次点击后，我没有看到任何其他消息。那是因为配置说：preventDuplicates: true

如果您将其更改为 false，它将非常有效。

如果你需要这个项目，你可以从这里 fork 它（我不知道为什么，但 stackblitz 现在不适用于任何 angular 项目）：https://stackblitz.com/edit/angular-aiadys

记得执行 npm install。

为什么有时 toasterService 不显示弹出窗口？

Why sometimes toasterService does not show popup?

angular

angular6

angular2-toaster

angular8