将 CanActivate Guard 错误实现为：没有 HRComponent 的提供者

Question

在实施 CanActivate Guard 时出现错误：没有 HRComponent 的提供者

import { Component, OnInit } from "@angular/core"
import { ActivatedRoute, CanActivate } from "@angular/router"
import { LoginService } from "../../services/loginservice"
@Component({
    templateUrl:"../../../templates/hrmodule/hrmodule.html"
})
export class HRComponent implements CanActivate {
    constructor(private Loginservice: LoginService) { }
    canActivate(){
        debugger;
        alert('Active');
        return true;
    }
}

这是我的HRmodile.ts

import { NgModule } from "@angular/core"
import { RouterModule} from "@angular/router"
import { HrRoute } from "../../app/route/hrroute"
import { HRComponent } from "../../app/component/hrcomponent/hrcomponent"
import { LoginService } from "../../app/services/loginservice"
@NgModule({
    imports: [RouterModule.forChild(HrRoute)],
    declarations: [HRComponent],
    bootstrap: [HRComponent ],
    providers: [LoginService]
})

export class HRmodule {
}

这是 HrRoute 我在这里写了 canActivate

import { HRComponent } from "../component/hrcomponent/hrcomponent"
export const HrRoute = [
    { path: "Add", component: HRComponent, canActivate: [HRComponent]}
];

这是我的 Html Link

    <a [routerLink]="['HrModule/Add']" class="btn btn-primary btn-sm">HrModule</a>

{ path: 'HrModule', loadChildren: '../../module/hrmodule/hrmodule#HRmodule' },

Answer 1

守卫必须是服务而不是组件。

@Injectable()
export class HRService implements CanActivate {
    constructor(private Loginservice: LoginService) { }
    canActivate(){
        debugger;
        alert('Active');
        return true;
    }
}

并且请注意，它不能成为您模块中的自举组件。按照惯例，自举组件是 "AppComponent"

@NgModule({
    imports: [RouterModule.forChild(HrRoute)],
    bootstrap: [ @@@ YOU NEED SOMETHING ELSE HERE @@@ ],
    providers: [LoginService, HRService ]
})
export class HRmodule {
}

有关更多信息和示例，请参阅此处的文档：https://angular.io/api/router/CanActivate

这里：https://angular.io/guide/router#milestone-5-route-guards

将 CanActivate Guard 错误实现为：没有 HRComponent 的提供者

While Implementing CanActivate Guard Error as : No provider for HRComponent

angular

angular2-forms

canactivate