angular - 如何从服务更改/控制按钮状态( bool 值)？

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 ，它直接工作，但不是通过服务。跟angular digest cycle有关系吗？

我一直在搜索(也在 SOF 中)并尝试不同的方法，但不幸的是没有成功。其实看起来很简单。

Answer 1

您也可以采用通常的方式 - 通过 Subject 或 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)
}

附注通常最好让 Subject 在类范围内保持私有(private)并创建另一个实例 - public btnSubject$ = this.$btnSubject.asObservable() 并订阅它。

---

旧帖:

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

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

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