Question

我正在尝试根据属性状态false/true禁用/启用组件中的按钮。此状态基于if语句在服务中更改。

*.service.ts

public connectionRetry(
    initialDelay,
    maxRetry,
    errorWhiteList,
    triggerBtn,

  ) {
    return (errors) => errors.scan((retryAttempts, error) => {
        if ( retryAttempts < maxRetry ) {
            triggerBtn = true;
        }
        if ( !errorWhiteList.includes(error.status ) || retryAttempts > maxRetry) {
            triggerBtn = false;
            throw error;
        }
        return retryAttempts + 1;
    }, 0).switchMap((retryAttempts) => {
          let delay = Math.pow(2, retryAttempts - 1) * initialDelay;
          return Observable.timer(delay);
    });
}

*.component.ts ：

public isBtnDisabled = false;
constructor ( public mainService: MainService, public mainUtils: MainUtils ) {}

public storeData(paramX, paramY) {
     this.mainService.addUser(paramX, paramY)
     .retryWhen(
         this.mainUtils.connectionRetry(
         xxx, 
         xxx, 
         [xxx], 
         this.isBtnDisabled,
    ))
    .subscribe(
       res => {....},
       error = > {...}

    );
}

*.component.html ：

<button [disabled]="!form.valid || isBtnDisabled">button text</button>

问题在于我无法使这个概念有效...属性isBtnDisabled始终保持状态：false在组件 ts 和 html 。

如果我直接在connectionRetry()中实现功能：*.component.ts，它可以直接使用，但不能通过服务。与角度消化周期有关吗？

我一直在搜索（也在SOF中）并尝试不同的方法，但不幸的是没有成功。实际上似乎很简单。

Answer 1

您也可以通常的方式 - 通过主题或 BehaviorSubject

服务：

public $btnSubject = new BehaviorSubject<boolean>();

现在，只要您需要将false更改为true，反之亦然，只需next(//true or false)：

return (errors) => errors.scan((retryAttempts, error) => {
   if ( retryAttempts < maxRetry ) {
       this.$btnSubject.next(true)
   }

在组件中订阅该主题：

ngOnInit() {
  this.mainService.$btnSubject.subscribe(val => this.isBtnDisabled = val)
}

P.S。通常最好将Subject保持为类范围并创建另一个实例 - public btnSubject$ = this.$btnSubject.asObservable()并订阅它。

<小时/> 旧帖子：

当您将this.isBtnDisabled传递给retryWhen()时，您只需传递它的值，而不是对象的引用。

我不确定你想在什么时候将isBtnDisabled设置为true，所以也许有更好的方法，但这也是，我认为没问题 - 你可以简单地引用isBtnDisabled ：

.subscribe(
  res => {this.triggerBtn = this.mainService.triggerBtn }

如何从服务更改/控制按钮状态（布尔值）？

1 个答案: