Angular флажок привязки к поведению субъекта - PullRequest
Новая
       3

Angular флажок привязки к поведению субъекта

0 голосов
/ 27 марта 2020

В Angular как я могу привязать флажок к rx js BehaviorSubject? Я хотел бы, чтобы изменения в флажке инициировали подписку, которая выполняет несколько операций. В настоящее время у меня есть следующее: 

openSessionsOnly$ = new BehaviorSubject(false);

, и это в моем шаблоне: 

<input type="checkbox" #openSessionsOnly [checked]="openSessionsOnly$.value" (change)="openSessionsOnly$.next(openSessionsOnly.checked)"/>

Хотя это работает, я чувствую, что делаю что-то не так. Я попытался использовать [(ngModel)], но он не работает с наблюдаемыми. Нужно ли использовать отдельные привязки свойств и событий, как у меня уже есть?

Ответы [ 2 ]

2 голосов
/ 27 марта 2020

Рассматривали ли вы использование реактивных элементов управления формы? Не нужно изобретать велосипед, angular поддерживает это из коробки. у вас может быть группа реактивной формы, которая имеет флажок реактивной формы для вашего флажка, и angular будет обрабатывать изменения значений, наблюдаемые для вас, все, что вам нужно сделать, это передать данные в наблюдаемые реактивные формы, а затем использовать оператор переключения на основе по вашей необходимости, например switchMap (отменит предыдущую подписку) в случае, если было отправлено новое значение, или выхлопная карта (запретит новую подписку до завершения текущей)

пример 

<form [formGroup]='formGroup'> 
<input type='checkbox' formControlName='checkboxControlName' value='true' />
</form>  

component
  formGroup = new FormGroup({
    checkboxControlName: new FormControl(false),
  });

ngOnInit(){
//Filter is in case you need to make sure the checkbox is checked. 
this.formGroup.get('checkboxControlName').valueChanges.pipe(
     filter(val) => val === true), 
     switchMap(val => add your new subscription here));
}

Подробнее

1 голос
/ 27 марта 2020

Это легко сделать с помощью свойства TypeScript: 

private openSessionsOnly$ = new BehaviorSubject(false);

get openSessionsOnly(): boolean {
  return this.openSessionsOnly$.value;
}
set openSessionsOnly(v: boolean) {
  this.openSessionsOnly$.next(v);
}

В шаблоне теперь вы можете привязывать события или использовать напрямую ngModel: 

<!-- you will need a name if inside a form -->
<input type="checkbox" [(ngModel)]="openSessionsOnly" />

Обратите внимание, что вы У вас нет гарантии, что следующий вызов будет вызван минимально возможное количество раз, поэтому вы можете добавить distinctUntilChanged в наблюдаемую трубу.

...