각도 2 : TypeError : 함수가 아닙니다.

Question

저는 angular-cli RC0로 스캐 폴딩 된 Angular 2 어플리케이션을 만들고 있습니다. 일부 경로를 보호하기 위해 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); 
    } 

} 

CanActivate에서 호출하지 않으면 모든 것이 올바르게 가져 오기/내보내기되고 growler가 작동합니다. 이것을 구현하기 위해, 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 내가 콘솔에서 다음과 같은 오류를 얻을 그라 울러 서비스를 호출하려고한다는 것입니다.

Answer 1

GrowlerComponent에서 growlerService.growl 함수를 직접 정의하고 있습니다. 그것은 Growler 특정 콜백 메커니즘을 구현하기 위해 (Growler 라이브러리의) 디자인에 의한 것 같습니다. 하지만 AuthGuard에는 그러한 권한이 없습니다. AuthGuard 생성자에 growlerService.growl = this.growl.bind(this); ...을 추가 할 수도 있습니다. 그런 다음 해당 메소드를 구현하십시오 (GrowlerComponent와 유사).