angular - 使用 CanActivate 守卫时获取 "No provider error"

Question

这是守卫:

// my.guard.ts
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';

Injectable()
export class MyGuard implements CanActivate {
  canActivate(next: ActivatedRouteSnapshot, prev: RouterStateSnapshot) {
    console.log('GUARD:', next, prev);
    return true;
  }
}

这是路由器:

import { RouterConfig } from '@angular/router';
import { MyGuard } from './guards/my.guard';
export const AppRoutes : RouterConfig = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [MyGuard]
  }
];

当页面加载时我得到:

EXCEPTION: Error: Uncaught (in promise): No provider for MyGuard!

我所见过的教程都没有提到如何将 MyGuard 作为提供者注入(inject)。我该怎么做？

Answer 1

我的解决方案是将 AuthGuard 服务添加到我的 AppModule 元数据中的提供者:

@NgModule({
    ...
    providers: [AuthGuard],
})
export class AppModule {}

为了能够在整个应用程序中使用服务，您需要在 AppModule 元数据中提供它。 https://angular.io/docs/ts/latest/guide/ngmodule.html 上的“服务提供商”部分给了我提示。