Angular 2:将依赖项注入@CanActivate? [英] Angular 2: Inject a dependency into @CanActivate?

问题描述

在 Angular 2 中，您可以为组件指定一个 @CanActivate 注释，您可以在其中确定是否应激活该组件.它不是接口的原因是因为回调在组件被实例化之前被调用.问题是，我想不出将依赖项注入该回调的方法.而且我需要我的服务来告诉我我是否已登录(以及以谁身份登录)以确定是否允许路由到特定组件.

In Angular 2, you can specify a @CanActivate annotation for a component where you can determine if the component should be activated or not. The reason it's not an interface is because the callback is called before the component is even instantiated. The problem is, I can't figure out a way to get dependencies injected into that callback. And I need my service that tells me whether I'm logged in or not (and as whom) to determine whether routing to a particular component is allowed or not.

如何将依赖项注入@CanActivate 回调?我正在使用 ES5，但这不起作用:

How can I inject a dependency into a @CanActivate callback? I'm using ES5, and this doesn't work:

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 ?

Alternatively, I can use the routerOnActivate lifecycle event on the component, and use this.router.navigate to send the user away if they're not supposed to be there. The downside there is that it breaks browser history: If I redirect you asynchronously every time you arrive at a particular URL, you can't use the Back button in your browser very usefully. Is there a way to have router.navigate use history.replaceState instead of history.pushState for this kind of situation?

推荐答案

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

Most solutions here will present problems with loading sub-dependencies from elsewhere in the hierarchy, because they create a new injector. Also, this results in additional (non-shared) services being instanced. I recommend following the pattern provided by Brandon in https://github.com/angular/angular/issues/4112

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

He references this Plunk: http://plnkr.co/edit/SF8gsYN1SvmUbkosHjqQ?p=preview

它的主要思想是一个单例注入器，他在应用程序初始化时保存.这提供了对您已经配置的根依赖项的访问，并进一步允许您的服务作为可能预期的单例共享:

Its main idea is a singleton injector, which he saves when the app initializes. This provides access to the root dependencies you already have configured, and further allows your services to be shared as a singleton as they were probably intended:

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);
});

这篇关于Angular 2:将依赖项注入@CanActivate?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！