Как изменить / контролировать состояние кнопки (булево) из Сервиса? - PullRequest
0 голосов
/ 03 мая 2018

Я пытаюсь отключить / включить кнопку в компоненте на основе состояния свойства 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) и пробовал другой подход, но, к сожалению, безуспешно. Кажется, на самом деле все просто.

1 Ответ

0 голосов
/ 03 мая 2018

Вы также можете сделать обычным способом - через Тема или ПоведениеSubject

Услуги:

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

Теперь, когда вам нужно изменить ложь на истину и наоборот, просто 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 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...