JavaScript 构造函数调用

Question

嗨，在我正在开发的应用程序中，我有一个构造函数来检查 redux 存储中各个组件传递的错误消息。它可以很好地显示错误或成功消息。但是，一旦用户关闭横幅(通过单击 x)并且我转到另一个人的投资组合，横幅就不再显示错误或成功消息

constructor(private store: Store<State>) {
  store
  .select(StatusBannerState)
  .map(data => {
    return data.status_banner;
  })
  .subscribe(banner_state => {
    if (banner_state.success_list.length > 0) {
      this.showBanner = true;
      this.bannerMessage = this.createSuccessBannerMessage(
        banner_state.success_list
      );
      setTimeout(() => {
        this.store.dispatch(new BannerDimissesSuccessMessage());
        this.bannerMessage = this.createErrorBannerMessage(
          banner_state.error_list
        );
      }, 5000);
    } else if (banner_state.error_list.length > 0) {
      this.bannerMessage = this.createErrorBannerMessage(
        banner_state.error_list
      );
    } else {
      this.showBanner = false;
      this.bannerMessage = '';
    }
  });
}

我现在有这个测试函数，我在 createErrorMessage 函数中调用它来显示或隐藏该函数(我在 Angular 应用程序的 HTML 组件中调用它)

showOrHideBanner(errorWidget) {
  errorWidget.length === 0
   ? (this.showBanner = false)
   : (this.showBanner = true);
}

我有另一种方法可以在初始化时清除 redux 存储

ngOnInit() {
  this.store.dispatch(new UserDismissesEverything());
}

用户关闭横幅后再次检查错误消息的最佳方法是什么

更新:关闭代码

onCloseClick() {
  this.close.emit(true);
  this.show = false;
  this.clearTimeout(this.timeoutId);
}

HTML组件代码

<div class="mt-1 container">
    <div class="alert-box">
    <div *ngIf="bannerMessage" class="px-3 mb-1">
                    <glass-alert-box
                        (close)="hideTheBanner()"
                      [success]="bannerMessageType == 'success'">{{ bannerMessage}}
                    </glass-alert-box>
            </div>
    </div>
</div>

Answer 1

尝试以下代码:

constructor(private store: Store<State>) {

}

ngOnInint() {
    this.store.dispatch(new UserDismissesEverything());
}

ngAfterViewInint() {
    this.store.select(StatusBannerState).map(data => {
        return data.status_banner;
    }).subscribe(banner_state => {
        if (banner_state.success_list.length > 0) {
            this.showBanner = true;
            this.bannerMessage = this.createSuccessBannerMessage(banner_state.success_list);
            setTimeout(() => {
                this.store.dispatch(new BannerDimissesSuccessMessage());
                this.bannerMessage = this.createErrorBannerMessage(banner_state.error_list);
            }, 5000);
        } else if (banner_state.error_list.length > 0) {
            this.bannerMessage = this.createErrorBannerMessage(banner_state.error_list);
        } else {
            this.showBanner = false;
            this.bannerMessage = '';
        }
    });
}