角度2:将依赖项注入@CanActivate?

前端之家收集整理的这篇文章主要介绍了角度2:将依赖项注入@CanActivate?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在角度2中,您可以为组件指定一个@CanActivate注释,您可以在其中确定组件是否应被激活.它不是接口的原因是因为在组件甚至实例化之前调用回调.问题是,我无法找出一种方法来将依赖注入到该回调中.我需要我的服务,告诉我我是否登录(和谁一起)来确定是否允许到特定组件的路由.

如何在@CanActivate回调中注入依赖项?我使用ES5,这不工作:

app.ListsComponent = ng.router.CanActivate([
    app.SessionService,function(session,instruction) {
        console.log(session);
        return true;
    }
])(app.ListsComponent);

编辑:或者,我可以在组件上使用routerOnActivate生命周期事件,并使用this.router.navigate将用户发送出去,如果它们不在那里.缺点是它破坏了浏览器的历史记录:如果我每次到达特定的URL时异步地重定向你,那么您无法在浏览器中非常有用地使用“后退”按钮.有没有办法让router.navigate使用history.replaceState而不是history.pushState这种情况?

这里的大多数解决方案将会在层次结构中从其他地方加载子依赖关系,因为它们创建了一个新的注入器.此外,这也导致额外的(非共享)服务被实例化.我建议按照Brandon在 https://github.com/angular/angular/issues/4112提供的模式

他引用这个Plunk:http://plnkr.co/edit/SF8gsYN1SvmUbkosHjqQ?p=preview

它的主要思想是单例注射器,当应用程序初始化时,它保存.这提供了对已经配置的根依赖关系的访问,并进一步允许您的服务作为单例共享,因为它们可能是:

import {Injector} from 'angular2/angular2';
let appInjectorRef: Injector;

export const appInjector = (injector?: Injector):Injector => {
    if (injector) {
      appInjectorRef = injector;
    }

    return appInjectorRef;
};

bootstrap([ServiceYouNeed]).then((appRef) => {
    // store a reference to the injector
    appInjector(appRef.injector);
});

猜你在找的设计模式相关文章