0

我正在尝试使用 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)
4

1 回答 1

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]},
];
于 2017-06-10T11:42:32.537 回答