无法在组件的@CanActivate 装饰器中获取服务的价值

Question

我正在使用 Angular 2.0.0-beta.15。我正在尝试在组件中使用@CanActivate。下面是一段代码。

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) =>  { 
console.log('loggedIn:' + isLoggedIn(next, previous));
console.log('isExists:' + isExists(next, previous))
})export class ParentLandingComponent {}

现isExists.ts中相关代码如下：

import {Injector} from 'angular2/core';
import {appInjector} from './app-injector';
import {DataService} from '../services/data-services.service';
export const isExists = (next: ComponentInstruction, previous: ComponentInstruction) => {
let injector: Injector = appInjector(); 
let userService: UserService = injector.get(UserService);
let router: Router = injector.get(Router);
let cookieService: CookieService = injector.resolveAndInstantiate(CookieService);

    dataService.isExists().subscribe(result => {
        console.log('isExists:' + result);
        if (result) {
            console.log('result:' + result);
            cookieService.removeAll();
            router.navigate(['Login']);
            return true;
        } else {
           return false;
        }
     });
};

我在 boot.ts 中也添加了以下内容。

///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
  import {bootstrap} from 'angular2/platform/browser';
  import {provide} from 'angular2/core';
  import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig, Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';
  import {AppComponent} from './app.component';
  import {HTTP_PROVIDERS} from 'angular2/http';
  import 'rxjs/Rx';
  import {DataService} from './services/data-services.service';
  import {StateService} from './services/current-user-state.service';
  import {appInjector} from './utils/app-injector';
  import {HttpClient} from './services/http-client.service';
   bootstrap(AppComponent, [DataService, StateService, HttpClient, ROUTER_PROVIDERS, HTTP_PROVIDERS,
provide(LocationStrategy, { useClass: HashLocationStrategy })])
.then(appRef => {
    appInjector(appRef.injector);
});

当我运行时，我在 @CanAnnotation 中获取 isExists(next, previous) 的值是未定义的，而不是布尔值。在 isExists.ts 中，我得到了正确的结果值。但是当我根据结果值传递布尔值时，我在注释上变得不确定 portion.Can 谁能帮助我知道这可能是什么问题？

Answer 1

CanActivate() 注释中的 lambda 必须 return boolean|Promise<boolean>。根据您的代码，它没有 returning 任何东西。我猜你会 return 来自 isExists() 的值。但是，isExists() 也没有 return 任何东西，这就是为什么它是 undefined。我看到您正在尝试从订阅方法 return true/false 。但是 return 是异步的，不会按您的预期进行解析。

我建议您将 Observable 转换为 Promise<boolean> 并从 isExists()

转换为 return

isExists()中的相关部分：

return dataService.isExists().map(result => { // change subscribe to 'map' in order to change the return type of the observable and do the other stuff 
    console.log('isExists:' + result);
    if (result) {
        console.log('result:' + result);
        cookieService.removeAll();
        router.navigate(['Login']);
        return true;
    } else {
       return false;
    }
 }).toPromise();

@CanActivate():

@CanActivate((next: ComponentInstruction, previous: ComponentInstruction) =>  { 
    console.log('loggedIn:' + isLoggedIn(next, previous));
    return isExists(next, previous);
})
export class ParentLandingComponent {}

无法在组件的@CanActivate 装饰器中获取服务的价值

Unable to get value of service in @CanActivate decorator in component

service

components

annotations

angular