且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在 Angular2 中重定向到@CanActivate 中的不同组件

更新时间:2023-10-25 23:36:46

是的,你可以!这样做可以防止您的组件无故实例化.

Yes, you can! Doing this will prevent your component from instantiating for nothing.

首先新建一个文件src/app-injector.ts

let appInjectorRef;

export const appInjector:any = (injector = false) => {
    if (!injector) {
        return appInjectorRef;
    }

    appInjectorRef = injector;

    return appInjectorRef;
};

然后,从bootstrap

// ...
import {appInjector} from './app-injector';
// ...


bootstrap(App, [
  ROUTER_PROVIDERS
]).then((appRef) => appInjector(appRef.injector));

终于在你的函数中

// ...
import {appInjector} from './app-injector';
// ...

@CanActivate((next, prev) => {
  let injector = appInjector();
  let router = injector.get(Router);

  if (42 != 4 + 2) {
    router.navigate(['You', 'Shall', 'Not', 'Pass']);
    return false;
  }

  return true;
})

等等!

这里讨论过https://github.com/angular/angular/issues/4112

您可以在此处找到完整示例 http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=预览 @brandonroberts

You can find a complete example here http://plnkr.co/edit/siMNH53PCuvUBRLk6suc?p=preview by @brandonroberts