角2：TypeError：関数ではありません

Question

私はAngular 2アプリケーションで作業していますが、angle-cli RC0で足場を取りました。 いくつかのルートを保護するためにAuthGuardをセットアップしました。このガードはCanActivateを実装しており、ログインしていなければユーザーをログインページにリダイレクトし、Angular Material2 MdSbackBarにはカスタムメッセージが表示されます。ここ AuthGuard：ここ

@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); 
    } 

} 

すべてが正しくインポート/エクスポートされ、GrowAlerはCanActivateから呼び出されていないときに機能します。これを構築するために、私はthis exampleに続き、この例ではgrowlerコンポーネントを角度のあるマテリアルコンポーネントに置き換えました。 GrowlerTypeClassはgrowlerコンポーネントで定義されたプライベートメソッドですが、それは問題ではありません。事前に

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 

おかげであなたは助けるために： 問題は、ユーザーがログインしていないときにcanActivate iは、コンソールに次のエラーを取得するグロウラーサービスを呼び出そうということです。

Answer 1

GrowlerComponentでは、growlerService.growl関数を自分で定義しています。 Growler固有のコールバックメカニズムを実装するために、（Growlerライブラリの）設計通りです。しかし、あなたはAuthGuardにそれを持っていません。あなたは、AuthGuardコンストラクタに growlerService.growl = this.growl.bind(this); ...を追加したいかもしれないようです。そして、そのメソッドを実装します（GrowlerComponentに似ています）。