RxJS -- 使用 RxJS 时如何通过单击按钮触发计时器？

Question

@Component({
    template: ` <div>
                    <a *ngIf="!sending" (click)="send()">Send</a>
                    <span *ngIf="sending" >{{seconds}} s</span>
                </div>`,
    selector: 'password-reset-form'
})
export class PasswordResetFormComponent implements OnInit {

    sending:boolean = false;
    seconds:number = 60;
    counterObservable = new Subject();


    constructor(public authService:AuthService, public router:Router, public formBuilder:FormBuilder) {

    }

    ngOnInit() {

        this.counterObservable.subscribe(()=> {
            this.seconds --;
        }, null, ()=> {
            this.seconds = 60;
            this.sending = false;
        });
    }

    send() {

        this.sending = true; 
        this.counterObservable.next(Observable.interval(1000).take(60));
    }
}

嘿，我尝试用ng2和RxJS做一个定时器，当我点击发送按钮时，它会显示一个60秒的定时器，但我花了很多时间仍然不知道如何使用RxJS去做吧。如果有人能帮助我，我将不胜感激。

Answer 1

像这样的东西应该可以工作：

@Component({
    template: ` <div>
                    <a *ngIf="!sending" (click)="send()">Send</a>
                    <span *ngIf="sending" >{{seconds}} s</span>
                </div>`,
    selector: 'password-reset-form'
})
export class PasswordResetFormComponent implements OnInit {

    sending:boolean = false;
    seconds:number = 60;    

    constructor(public authService:AuthService, public router:Router, public formBuilder:FormBuilder) {

    }

    ngOnInit() { }

    send() {

        this.sending = true;
        Observable.timer(1000, 60)
            .subscribe(() => {
                this.seconds--;
            }, 
            err => {},
            () => {
                this.sending = false;
                this.seconds = 60;
            });  
    }
}

Answer 2

send() {

    this.sending = true;
    let subscription = Observable.interval(1000).take(60).subscribe(()=> {
        this.seconds --;
    }, null, ()=> {
        this.seconds = 60;
        this.sending = false;
        subscription.unsubscribe();
    });
}

我这样解决了

RxJS -- 使用 RxJS 时如何通过单击按钮触发计时器？

RxJS -- How to make a timer trigger by click a button when using RxJS?

rxjs

rxjs5

angular