angular - 使用 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

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

@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
])

Answer 3

我通过添加'MyGuard'in providers 数组解决了这个问题

@NgModule({
  declarations: [
..........
],
providers: [MyGuard]
........