2017-02-28 109 views
0

我正在使用angular-cli RC0搭建Angular 2應用程序。 我已經設置了一個AuthGuard來保護一些路線。這名警衛實施了CanActivate,如果沒有登錄,則將用戶重定向到登錄頁面,並且一個Angular Material2 MdSbackBar應該顯示一條自定義消息。 這裏AuthGuard:Angular 2:TypeError:不是函數

@Injectable() 
 
export class AuthGuard implements CanActivate { 
 

 
    constructor(
 
    private router: Router, 
 
    private authService: AuthService, 
 
    private growlerService: GrowlerService 
 
) { } 
 

 
    canActivate(): boolean { 
 
    if (this.authService.isAuthenticated()) { 
 
     return true; 
 
    } else { 
 
     this.router.navigate(['auth/login']); 
 
     this.growlerService.growl('Autenticazione richiesta', GrowlerMessageType.Error); 
 
     return false; 
 
    } 
 
    } 
 

 
}

在這裏,如上所示,其被稱爲在CanActivate方法咆哮服務:

@Injectable() 
export class GrowlerService { 

    constructor() { } 

    growl: (message: string, type: GrowlerMessageType) => void; 

} 

最後在咆哮部件的實際功能

export class GrowlerComponent { 

    constructor(
    private snackBar: MdSnackBar, 
    private growlerService: GrowlerService 
) { 
    growlerService.growl = this.growl.bind(this); 
    } 

    growl(message: string, type: GrowlerMessageType): void { 
    const growlerConfig = new MdSnackBarConfig(); 
    growlerConfig.duration = 3000; 
    growlerConfig.extraClasses = this.growlerTypeClass(type); 
    this.snackBar.open(message, null, growlerConfig); 
    } 

} 

當CanActivate未被調用時,所有內容都正確地導入/導出,並且咆哮者可以正常工作。爲了構建這個,我遵循this example,在示例中用一個角度材料組件替換了增量器組件。 GrowlerTypeClass是在擴展器組件中定義的私有方法,但這不是問題。 問題是,當未登錄的用戶和canActivate嘗試調用咆哮服務,我得到以下錯誤控制檯:提前

EXCEPTION: Uncaught (in promise): TypeError: this.growlerService.growl is not a function 
TypeError: this.growlerService.growl is not a function 
    at AuthGuard.webpackJsonp.259.AuthGuard.canActivate 

感謝您幫助。

+0

你可以添加Auth Guard的構造函數嗎? – echonax

+0

@echonax我已經編輯了片段。對不起,我的英語很糟糕:( – bado

回答

0

在GrowlerComponent中,您自己定義了growlerService.growl函數。它看起來像是通過設計(咆哮者的圖書館),以實現某種類型的咆哮者特定的回調機制。但是你的AuthGuard沒有這個功能。它看起來像你可能想要添加: growlerService.growl = this.growl.bind(this); ...以及AuthGuard構造函數。然後實現該方法(類似於GrowlerComponent)。

+0

奇怪的是,它實際上在其他地方工作。例如,成功登錄後,我稱之爲:this.growlerService.growl(this.message,GrowlerMessageType.Success);'它完美的工作 – bado

+0

什麼時候GrowlerComponent被實例化(可能只有在登錄時)?換句話說,組件在什麼情況下實際出現?因爲它的構造函數是唯一可以看到咆哮方法得到定義的地方。 – Will

相關問題