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