Question

我正在尝试使用canDeActivate和canActivate，我正在使用Angular 4，如下所示。我得到了no provider error。这个实现有什么问题，或者干净利落地实现这个问题的正确方法是什么。

import {ModuleWithProviders, } from '@angular/core';

    import {Routes, RouterModule, RouterStateSnapshot, ActivatedRouteSnapshot, CanDeactivate} from '@angular/router';


    import {HomeComponent} from '../home/home.component';

    var x: any = true;

    const appRoutes: Routes = [
        {path: '', component: HomeComponent, canDeactivate: [true]},
        {path: 'test', component: HomeComponent, canDeactivate: [x]},

    ];

    export const appRoutingProviders: any[] = [];

    export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

更新错误：

ERROR Error: Uncaught (in promise): Error: No provider for true!
Error: No provider for true!
    at injectionError (reflective_errors.ts:71)
    at noProviderError (reflective_errors.ts:105)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141)
    at PreActivation.getToken (router.ts:1232)
    at MergeMapSubscriber.eval [as project] (router.ts:1191)
    at MergeMapSubscriber._tryNext (mergeMap.ts:125)
    at injectionError (reflective_errors.ts:71)
    at noProviderError (reflective_errors.ts:105)
    at ReflectiveInjector_._throwOrNull (reflective_injector.ts:500)
    at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:543)
    at ReflectiveInjector_._getByKey (reflective_injector.ts:404)
    at ReflectiveInjector_.get (reflective_injector.ts:349)
    at AppModuleInjector.NgModuleInjector.get (ng_module_factory.ts:141)
    at PreActivation.getToken (router.ts:1232)
    at MergeMapSubscriber.eval [as project] (router.ts:1191)
    at MergeMapSubscriber._tryNext (mergeMap.ts:125)
    at resolvePromise (zone.js:769)
    at resolvePromise (zone.js:740)
    at zone.js:817
    at ZoneDelegate.invokeTask (zone.js:424)
    at Object.onInvokeTask (ng_zone.ts:253)
    at ZoneDelegate.invokeTask (zone.js:423)
    at Zone.runTask (zone.js:191)
    at drainMicroTaskQueue (zone.js:584)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490)

Answer 1

所有守卫都会使用一个引用函数或类引用的标记。以下是作为警卫的功能的简单示例：

 // create a token
 const token = new InjectionToken('name');

 // register the provider by that token
 providers: [{provide: token, useValue: function() {} }]

 // use this token in a guard
 const appRoutes: Routes = [
     {path: '', component: HomeComponent, canDeactivate: [token]},
 ];

通常情况下，您不会明确地创建令牌，但是当您使用它时，它会通过对类的引用来创建：

@Injectable()
class CanActivateContacts {
    constructor() {}
    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)

@NgModule({
    providers: [CanActivateContacts] <------ token is implicitly created here
})
class AppModule

const appRoutes: Routes = [
    {path: '', component: HomeComponent, canDeactivate: [CanActivateContacts]},
];

无法在Angular中使用canDeActivate或canActivate

1 个答案: