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

Answer 3

我通过在providers数组中添加'MyGuard'来解决这个问题

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

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

3 个答案: