可觀察等待具有多個可觀察功能的函數

Question

我有兩個服務配置auth，它們具有類似於以下代碼：

public init = (): Observable<AppConfig> => {
    return this._http.post(this.actionUrl, JSON.stringify(this.APP_CONFIG), { headers: this.headers })
      .map((response: Response) => response.json() as AppConfig)
      .catch(this.handleError);
  }

這兩個服務在一個最終服務中被調用，它將在我的Angular 5應用程序的每個組件上被調用：

@Injectable()
export class PageService {

  constructor(private configService: ConfigService, private authService: AuthService) { }

  config: AppConfig;
  auth: Auth;
  grants: Grants;

  init() {
    Observable.forkJoin(
      this.configService.init(),
      this.authService.init(),
      this.authService.grants())
      .subscribe(
      data => {
        this.config = data[0];
        this.auth = data[1];
        this.grants = data[2];

        // Logs
        console.log(this.config);
        console.log(this.auth);
        console.log(this.grants);
      });
  }
}

這是我在組件中的調用方式：

export class DashboardComponent implements OnInit {
  columns: any[];

  constructor(private pageService: PageService) { }

  ngOnInit() {
    this.pageService.init();
    this.userAccessPanel();
  }

  userAccessPanel = () => {
    console.log('Grant : ', this.pageService.grants);
  }
}

問題是this.pageService.grants顯示未定義，我猜是因為在我可以從服務器獲取數據之前調用了它。 但是在那種情況下，我找不到任何解決互聯網問題的方法。

確保this.pageService.init()完成並從服務器獲取所有數據后，如何啟動this.userAccessPanel() ？

預先感謝

Answer 1

init（）必須返回一個可觀察的

init() {
return Observable.forkJoin(
  this.configService.init(),
  this.authService.init(),
  this.authService.grants())
  .map(([config,auth,grants])=>{config,auth,grants})
 }

然后在您的其他組件中

ngOnInit() {
this.pageService.init()
.map(obj=>this.userAccessPanel(obj.grants)).subscribe()
 }

 userAccessPanel = (grants) => {
console.log('Grant : ', grants);
 }