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

Question

I am trying to resolve canActivate hook from another component and injected service, but something stuck. Guard and workers service are provided and working fine alone. (Returning true form guard resloves the route. Subscribing on workers emitters fires successful.) The code is: workers.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);

What i'm doing wrong? I was tried with Promises too.

Answer 1

What I was trying to explain in previous comments is that wrapping the subscription of an observable inside a newly created observable is not necessary.

If we were comparing that to Promise :

What you're doing here is something like that :

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

What you should be doing :

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

Going back to our Observable, instead of doing :

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

you should do :

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