当前位置:  开发笔记 > 前端 > 正文

Angular 2:将依赖项注入@CanActivate?

如何解决《Angular2:将依赖项注入@CanActivate?》经验,为你挑选了1个好方法。

在Angular 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这种情况?



1> shannon..:

此处的大多数解决方案都会出现从层次结构中的其他位置加载子依赖关系的问题,因为它们会创建新的注入器.此外,这会导致实例化其他(非共享)服务.我建议遵循Brandon在https://github.com/angular/angular/issues/4112中提供的模式

他引用了这篇文章: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);
});

推荐阅读
保佑欣疼你的芯疼
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有