Я пытаюсь реализовать таймер обратного отсчета в angular 6, используя rxjs 6. Мне также нужно иметь возможность подписаться на результаты и сбросить таймер:
Что я пробовал:
var timer = interval(1000).pipe(
take(4)
);
timer.subscribe(x => console.info(x));
Результат:
0
1
2
3
Что мне нужно, так это перевернуть таймер, чтобы считать от 3 до 1
Я нашел эту функцию обратного отсчета для реализации обратного отсчета, но я не могу подписаться на нее, как в первом примере.
interval(1000).pipe(
map((x) => { console.info( x) })
);
Результат:
пустой
Вы можете использовать таймер вместо интервала, чтобы фактически реализовать обратный отсчет, вы должны отобразить результат таймера следующим образом: map(i => countdownStart - i)
const countdownStart = 3;
Rx.Observable
.timer(1000, 1000)
.map(i => countdownStart - i)
.take(countdownStart + 1)
.subscribe(i => console.info(i));
Журналы: 3 2 1 0
Другим возможным решением является использование оператора диапазона.
Rx.Observable
.range(0, countdownStart + 1)
.map(i => countdownStart - i)
.subscribe(i => console.info(i));
Журналы: 3 2 1 0
Вот как я это делаю с TimerObservable
. Не забудьте отписаться при уничтожении.
import {TimerObservable} from "rxjs/observable/TimerObservable";
import { Subscription } from 'rxjs';
export class MyComponent implements OnInit, OnDestroy {
private sub: Subscription;
ngOnInit() {
// Delay 0 seconds, run every second
let timer = TimerObservable.create(0, 1000);
let number = 3;
this.sub = timer.subscribe(t => {
if (number !== 0) {
console.info(number);
number--;
}
});
}
ngOnDestroy(): void {
this.sub.unsubscribe();
}
}
Как насчет?
var timer = interval(1000).pipe(
take(4),
map(x => 3 - x)
);
timer.subscribe(console.info);
спасибо за ответ, но я все еще пытаюсь реализовать это в rxJs 6, с этим синтаксисом я получаю ошибки