angular – 无法解析AuthGuard的所有参数

我有这个AuthGuard:

export class AuthGuard implements CanActivate {

  constructor (private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('token')) {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
  }
}

我在AppModule中提供了它:

@NgModule({
  declarations: [/*...*/],imports: [NotificationRoutingModule],providers: [AuthService,AuthGuard],bootstrap: [AppComponent]
})
export class AppModule {
}

我试图在我的路由模块中使用这个后卫,如下所示:

const routes = [
  {
    path: 'notification',component: NotificationRootComponent
    children: [
      {path: '',redirectTo: 'list',pathMatch: 'full'},{path: 'list',component: NotificationListComponent,canActivate: [AuthGuard]},{path: ':id',component: NotificationDetailComponent,canActivate: [AuthGuard]}
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],exports: [RouterModule],declarations: []
})
export class NotificationRoutingModule {
}

我收到这个错误

enter image description here

我错过了什么?这个错误的来源在哪里?

编辑:
我使用的是Angular 4.4.6

当我使用基本路线防护并且更新路线配置时,它工作正常:

@NgModule({
  declarations: [],imports: [],providers: [
    {
      provide: 'CannotBeActivated',useValue: () => {
        return false;
      }
    }
  ],bootstrap: [AppComponent]
})
export class AppModule {
}


const routes = [
  {
    path: 'notification',component: NotificationRootComponent,children: [
      {path: '',canActivate: ['CannotBeActivated']},canActivate: ['CannotBeActivated']}
    ]
  }
];

**我的tsconfig.json:**

{
  "compileOnSave": false,"compilerOptions": {
    "outDir": "./dist/out-tsc","sourceMap": true,"declaration": false,"moduleResolution": "node","emitDecoratorMetadata": true,"experimentalDecorators": true,"target": "es5","typeRoots": [
      "node_modules/@types"
    ],"lib": [
      "es2017","dom"
    ]
  }
}

解决方法

您只是错过了在AuthGuard服务之前放置@Injectable()

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...