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

2023-11-27

在 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 use history.replaceState代替history.pushState对于这种情况?


这里的大多数解决方案都会出现从层次结构中其他位置加载子依赖项的问题,因为它们创建了一个新的注入器。此外,这还会导致额外的(非共享)服务被实例化。我建议遵循布兰登提供的模式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);
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2:将依赖项注入@CanActivate? 的相关文章

随机推荐