Angular 2 CanActivate作为承诺，它从另一个组件解析

Question

我试图解决canActivate钩从另一个组件和注入的服务，但卡住了。 提供警卫和工人服务，并且可以单独工作。 （返回真实的表单守卫将重新路由该路由。成功订阅worker发射器将触发火灾。）代码为： worker.service.ts

@Injectable()
export class WorkersService {
public mainCmpState: EventEmitter<any>;
constructor() {
   this.mainCmpState = new EventEmitter();
}
toggleMainCmpState(bool) {
    console.log('TOGGLE MAIN CMP' , bool);
    this.mainCmpState.emit(bool);
}

Guard.service.ts

@Injectable()
export class GuardService implements CanActivate {
   constructor(public workers: WorkersService) {}

   canActivate() {
        console.log('CAN ACTIVATE IS CALLED');
        return Observable.create(observer => {
         this.workers.mainCmpState.subscribe((data) => {
                console.log('CAN ACTIVATE SUB', data);

                observer.next(true);
                observer.complete();
        });
    });
}

some.component.ts

//on some test button click
this.workers.toggleMainCmpState(true);

我做错了什么？ 我也曾尝试过Promises。

Answer 1

我在先前的评论中试图解释的是，不需要将可观察变量的订阅包装在新创建的可观察变量中。

如果我们将其与Promise进行比较：

您在这里所做的就是这样：

  canActivate() {
    return new Promise((resolve, reject) => {
      this.somePromiseYouAlreadyHave.then(() => {
        resolve(true)
      })
    })
  }

您应该做什么：

  canActivate() {
    return this.somePromiseYouAlreadyHave;
    // assuming this promise will be resolve with value true
  }

回到我们的Observable，而不是做：

  canActivate() {
    console.log('CAN ACTIVATE IS CALLED');
    return Observable.create((observer: Subject<boolean>) => {
      this.workers.mainCmpState.subscribe(res => {
        observer.next(true);
      })
    });
  }

你应该做 ：

return canActivate() {
  return this.workers.mainCmpState;
}