Angular 无法从ngrx/store取消订阅ActionsObject

我使用

ngrx/store

实现登录操作，该操作从订阅商店获取日期。登录组件是一个模式，当我输入错误的密码时，我会得到

data.type==='login\u FAILED'

，但是，当我关闭模式并重新打开它时，数据操作仍然是

login\u FAILED

，而不是

INIT

。因此，登录操作不是取消订阅，我尝试手动取消订阅，但不起作用。我如何才能正确地取消订阅登录操作

import { Component, OnInit, ViewChildren, OnDestroy } from '@angular/core';

// shared
import { ToasterService } from '../../shared/providers/toaster-service/toaster.service';

// ngx-bootstrap
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';

// ngrx
import { ActionsSubject } from '@ngrx/store';

// rxjs
import { Subscription } from 'rxjs/Subscription';

  loading = <boolean>false;
  actionSub = new Subscription();
  errorMessage = <string>'';

constructor(
    private actionsSubj: ActionsSubject,
    private toastService: ToasterService,
    private bsModalRef: BsModalRef,
  ) {
    this.actionSub = this.actionsSubj.subscribe((data: any) => {
      // listen to action of setting tokens successfully / failed
      console.log(data);
      if (data.type === 'LOGIN_FAILED') {
        if (data.payload.error.error.data.type === 'WrongCredentialsException') {
          // hide spinner for login button
          this.loading = false;
          this.errorMessage = 'Wrong Credentials';
        else {
          this.loading = false;
          this.toastService.showError('An error happened when trying to login. Please try again later.');
        }
      } else if (data.type === 'SET_TOKEN') {
        this.bsModalRef.hide();
      }
    });
  } 

  ngOnDestroy() {
    this.actionSub.unsubscribe();
  }

从'@angular/core'导入{Component，OnInit，ViewChildren，OnDestroy}；
//共享
从“../../shared/providers/toaster service/toaster.service”导入{ToasterService}；
//ngx引导
从“ngx引导/modal/bs-modal-ref.service”导入{BsModalRef}；
//ngrx
从'@ngrx/store'导入{actionsObject}；
//rxjs
从'rxjs/Subscription'导入{Subscription}；
加载=假；
actionSub=新订阅（）；
errorMessage=''；
建造师(
私人诉讼标的：诉讼标的，
私人烤面包机服务：烤面包机服务，
私人bsModalRef:bsModalRef，
) {
this.actionSub=this.actionsSubj.subscribe（（数据：any）=>{
//侦听设置令牌成功/失败的操作
控制台日志（数据）；
如果（data.type==='LOGIN\u FAILED'）{
if（data.payload.error.error.data.type==='ErrorCredentialsException'）{
//隐藏登录按钮的微调器
这一点：加载=错误；
this.errorMessage='错误的凭据'；
否则{
这一点：加载=错误；
this.toastService.bathror（'尝试登录时出错。请稍后再试'）；
}
}else if（data.type==='SET\u TOKEN'）{
this.bsModalRef.hide（）；
}
});
} 
恩贡德斯特罗（）{
this.actionSub.unsubscribe（）；
}

这是因为

actionsObject

是引擎盖下的

行为主体，这意味着它将存储最新的动作

对于您的情况，您应该使用
scannedactionssobject
，它是引擎盖下的
主题

我还鼓励您使用
@ngrx/effects
-
处理表单。您是否为每次登录尝试创建一个新组件？@ibenjelloun不，如果登录失败，模式保持不变，只有成功登录才会自动关闭模式。这是否意味着只有成功登录时才会执行
ngOnDestroy
在
ngondestory
函数中添加断点以进行调试。@ibenjelloun不，
ngondestory
在组件关闭时执行。您有答案。它不会因为您所说的而取消订阅。谢谢，我将对此进行研究。