卡住角度2的角度材質中的MdSnackBar的Observable Loop

Question

我想在登錄失敗時顯示一個快餐欄，指出'錯誤連接'。這很簡單。但是，我希望它在10秒內解散後或者在行動解散小吃店後再次嘗試。但是我的observable立即運行，我陷入了一個無限可觀的循環，試圖在失敗後立即登錄。

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! 
    } 

}