角度2の角度材質のMdSnackBarで観測可能なループに詰まっています

Question

ログインが失敗して「エラー接続中」と表示されたらスナックバーを表示します。そんなに単純です。しかし、私はそれが解雇されたとき、または行動がスナックバーを却下した後に10秒後に再試行したい。しかし、私の観測は直ちに実行され、失敗した直後にログインしようとする無限の観測可能ループに詰まっています。あなたは、ほとんどがあった

login.page.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { UserService, HelpersService, AuthService } from '../../services/'; 

@Component({ 
    selector: 'login-page', 
    templateUrl: './login.page.html', 
    styleUrls: ['./login.page.scss'] 
}) 
export class LoginPage { 
    loginError: any; 
    constructor(
    private router: Router, 
    private auth: AuthService, 
    public helpers: HelpersService, 
) { } 

    login() { 
    this.auth.login().then((response) => { 
     this.router.navigate(['/']); 
    }).catch(error => { 
     this.loginError = this.helpers.notify('error connecting', 'try again', 10000); 
     this.helpers.notifyAction(this.loginError, this.login()); 
    }); 
    }; 


} 

helpers.service.ts

import { Injectable } from '@angular/core'; 
import { MdSnackBar, MdSnackBarRef } from '@angular/material'; 

@Injectable() 
export class HelpersService { 

    constructor(public snackBar: MdSnackBar) {} 

    notify(message: string, action: string, duration: number) { 
    return this.snackBar.open(message, action, {duration}); 
    } 

    notifyAction(notification: MdSnackBarRef<any>, next) { 
    return notification.onAction().subscribe(() => next); 
    } 


} 

Answer 1

Live Example Infinity Login

。また、矢印機能やbindを使って文脈に注意してください。

login.page.ts

this.helpers.notifyAction(this.loginError,() => this.login()); 

helpers.service.ts

notifyAction(notification: MdSnackBarRef<any>, next) { 
    notification.afterDismissed().subscribe(next); 

    return notification.onAction().subscribe(notification.dismiss); 
} 

Answer 2

。あなたの出身の私のコメントに注意してください。あなたが代わりにそれを呼び出す関数を渡す必要があり

login.page.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { UserService, HelpersService, AuthService } from '../../services/'; 

@Component({ 
    selector: 'login-page', 
    templateUrl: './login.page.html', 
    styleUrls: ['./login.page.scss'] 
}) 
export class LoginPage { 
    loginError: any; 
    constructor(
    private router: Router, 
    private auth: AuthService, 
    public helpers: HelpersService, 
) { } 

    login() { 
    this.auth.login().then((response) => { 
     this.router.navigate(['/']); 
    }).catch(error => { 
     this.loginError = this.helpers.notify('error connecting', 'try again', 10000); 
     this.helpers.notifyAction(this.loginError, this.login); // no parenthesis here! 
    }); 
    }; 

} 

helpers.service.ts

import { Injectable } from '@angular/core'; 
import { MdSnackBar, MdSnackBarRef } from '@angular/material'; 

@Injectable() 
export class HelpersService { 

    constructor(public snackBar: MdSnackBar) {} 

    notify(message: string, action: string, duration: number) { 
    return this.snackBar.open(message, action, {duration}); 
    } 

    notifyAction(notification: MdSnackBarRef<any>, next) { 
    return notification.onAction().subscribe(() => next()); // they are here! 
    } 

}