我设置了一个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方法中调用的growler服务，如上所示：
@Injectable()
export class GrowlerService {
constructor() { }
growl: (message: string, type: GrowlerMessageType) => void;
}
最后是growler组件的实际功能
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，在示例中用角度材料组件替换了growler组件 . GrowlerTypeClass是在growler组件中定义的私有方法，但这不是问题 . 问题是，当用户未登录并且canActivate尝试调用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
在此先感谢您的帮助 .
1 回答
在GrowlerComponent中，您自己定义了growlerService.growl函数 . 看起来这是设计（Growler库），以实现某种Growler特定的回调机制 . 但是你的AuthGuard没有 . 看起来您可能想要向AuthGuard构造函数添加：
growlerService.growl = this.growl.bind(this);....然后实现该方法（类似于GrowlerComponent） .