Question

我正在开发一个Angular 2应用程序，搭建angular-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方法中调用的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

先谢谢你的帮助。

Answer 1

在GrowlerComponent中，您自己定义了growlerService.growl函数。看起来这是设计（Growler库），以实现某种Growler特定的回调机制。但是你的AuthGuard没有。看起来您可能想要添加： growlerService.growl = this.growl.bind(this); ...也是AuthGuard构造函数。然后实现该方法（类似于GrowlerComponent）。

Angular 2：TypeError：不是函数

1 个答案: