Question

我在角度5中有一个自定义类（非模块），我想使用此类实现CanActivate接口，因为我想将其用作route guard。

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { Router } from '@angular/router';

@Injectable()
export class TokenRequiredRouteGuard  implements CanActivate {

    constructor(private router: Router){}

    canActivate(){
        let token = localStorage.getItem('token');
        if(!token){
            this.router.navigate['/splashpage'];
            return false;
        }else{
            return true;
        }
    }
}

在AppModule中，我在提供程序部分添加了类，以便通过angular的DI来获取它：

    NgModule({
  declarations: [
    AppComponent,
    SplashpageComponent
  ],
  imports: [
    RouterModule.forRoot(appRoutes,{ useHash: true }),
    BrowserModule,
    FormsModule,
    HttpModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    CalendarModule,

  ],
  providers: [TokenRequiredRouteGuard],
  bootstrap: [AppComponent],

})

但是当这条路线在运行时开始行动时，我得到：

core.js:1448 ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[TokenRequiredRouteGuard]: 
  StaticInjectorError(Platform: core)[TokenRequiredRouteGuard]: 
    NullInjectorError: No provider for TokenRequiredRouteGuard!
Error: StaticInjectorError(AppModule)[TokenRequiredRouteGuard]: 
  StaticInjectorError(Platform: core)[TokenRequiredRouteGuard]: 
    NullInjectorError: No provider for TokenRequiredRouteGuard!

我在github上发现了几个针对类似问题而打开的事件，但他们都提到在imports的{{1}}部分添加导入，但我的课程不是模块。知道我做错了吗？

Answer 1

根据您在上面发布的文档，您应该按如下方式提供CanActivate实现：

import { TokenRequiredRouteGuard}                from '../tokenRequiredRouteGuard.service';

const routesConfig: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    canActivate: [TokenRequiredRouteGuard],
    children: [
      {
        path: '',
        children: [
          { path: 'test1', component: Test1},
          { path: 'test2', component: Test2}
        ],
      }
    ]
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routesConfig)
  ],
  exports: [
    RouterModule
  ]
})
export class AppModule { }

即。您不应该将其声明为提供的，而是将其作为属性的路由器配置提供＆＃34; canActivate＆＃34;

Angular5提供商基于DI问题

1 个答案: