Как мы можем отловить источник событий от источника событий в канале rxjs - PullRequest
Новая
       67

Как мы можем отловить источник событий от источника событий в канале rxjs

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

Мне нужно поймать источник событий в канале и выполнить некоторые операции на его основе.

Ниже приведен фрагмент кода файла html и ts.

xyx.component. html

    <div *ngIf="count | async as count">
  <div style="text-align: center">
    <div>{{ count.counter }}</div>
    <div>
      <input type="button" value="start" (click)="start.emit()">
      &nbsp;
      <input type="button" value="stop" (click)="stop.emit()">
    </div>
  </div>
</div>

xyx.component.ts 

@Component({
  selector: 'xyz-app',
  templateUrl: './xyz.component.html',
  styleUrls: ['./xyz.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class XYZComponent {
  public readonly count: Observable<{
    counter: number,
  }>;

  public readonly start: EventEmitter<void> = new EventEmitter();
  public readonly stop: EventEmitter<void> = new EventEmitter();

  constructor() {
    this.count = interval(1000).pipe(
      map(counter => counter + 1),
      startWith(0),
      map(counter => ({counter})),
    );
  }
}

Что нужно сделать в канале, чтобы перехватить это событие выдать и выполнить запуск и остановку счетчика.

1 Ответ

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

кольцевой канал выполняет работу по преобразованию данных, асинхронный c канал выполняет работу по подписке на наблюдаемые объекты и отписывается при уничтожении компонента.

вы можете выполнять работу по остановке и начать с присвоения нуля наблюдаемой 'count' и присвоения новой наблюдаемой в случае запуска

, но вы также можете выполнить эту операцию с помощью оператора rx js, например takeUntil, repeatWhen

  counter: Observable<number>;
  start = new Subject();
  stop = new Subject();

  constructor() {
    this.counter = interval(1000).pipe(
      map(counter => counter + 1),
      startWith(0),
      takeUntil(this.stop),
      repeatWhen(() => this.start)
    );
  }

отметьте это демо ?

...