使用CanActivate防护时获取"无提供程序错误"

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作为提供者.我该怎么做呢？

Answer 1

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

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

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

Answer 2

你的路由配置应该是这样的：

export const APP_ROUTER_PROVIDERS = [
    MyGuard, <== notice this line
    provideRouter(AppRoutes )
];

进而

import { APP_ROUTER_PROVIDERS } from './app.routes';    
import { AppComponent } from './app.component';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS
])