生命周期事件中的角度 HTTP 同步请求

Question

在 Angular2+ 中，如何确保 HTTP 请求（或 Observable）在进入下一行之前完成。 https://stackblitz.com/edit/angular-uvtfln

export class AppComponent implements OnInit, AfterViewInit  {
  name = 'AngularX';
  systemPreference: any;

  constructor(private http: HttpClient){
  }

  ngOnInit(){
    console.log("ngOnInit");
    //get system preference, it is used in whole app,
    //it needs to be available so other component can use it.
    this.http.get("https://data.hawaii.gov/api/views/usep-nua7/rows.json").subscribe(res=>{
      //How to make it is done before go to the next life circle event?
      this.systemPreference = res;
    })
  }

  ngAfterViewInit(){
    console.log("ngAfterViewInit");
    //the below got undefined, I expect the subscriber must be done at ngOnInit 
    //before reaching this function (ngAfterViewInit)
    console.log(this.systemPreference);
  }
}

Answer 1

我唯一能想到的就是使用 BehaviorSubject 或仅使用 Subject。考虑进行以下更改：

systemPreference = new BehaviorSubject<any>({});

  ngOnInit(){
    console.log("ngOnInit");
    //get system preference
    this.http.get("https://data.hawaii.gov/api/views/usep-nua7/rows.json").subscribe(res=>{
      systemPreference.next(res);
    })


  ngAfterViewInit(){
    console.log("ngAfterViewInit");
  systemPreference.subscribe(pref => 
    console.log(pref ));
  }

我认为这个修复是一种 hack，正确的方法是被动地处理这个问题。如果没有大局，很难为您提供有关反应式方法的指导。

-艾萨克