如何等待service load 完data?

RxJS
1

我想在component constructor 裡先load data,然後在ngOnInit() 裡面用這些data 來update 畫面。
可是我用了await-async 的方法去做好像不行,煩請高人指點.

這是我的component source code:

import { Component, OnInit } from '@angular/core';
import {MonthlyCalendar} from './monthly-calendar';
import { MonthlyCalendarService } from './monthly-calendar.service';
import { resolve } from 'url';
@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {
  monthlyCalendar: MonthlyCalendar;
  constructor(private monthlyCalendarService: MonthlyCalendarService) {
	this.monthlyCalendar = null;
	console.log('t0:' + new Date());
	this._getData();

	console.log('t2:' + new Date());
  }

  ngOnInit() {
	console.log('t3:' + new Date());
	console.log(this.monthlyCalendar);
  }
  async _getData() {

	await this.monthlyCalendarService.getMonthlyCalendar(null, null)
	.then((data: MonthlyCalendar) => {
	  console.log('t1:' + new Date());
	  this.monthlyCalendar = data;
	})
	.catch ((err: Error) => {
	  alert(err.stack);
	});
  }
}

這是我的service source code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpParams } from '@angular/common/http';
import { MonthlyCalendar } from './monthly-calendar';
import { resolve, reject } from 'q';

@Injectable({
  providedIn: 'root'
})
export class MonthlyCalendarService {

  constructor(private http: HttpClient) { }
  getMonthlyCalendar(year: number, month: number): Promise<object> {
	const params = new HttpParams();
	if (year != null) {
	  params.set('year', year.toString());
	}
	if (month != null) {
	  params.set('month', month.toString());
	}
	return this.http.get('backend/getMonthlyCalendar.php', {params}).toPromise();
  }
}

I attached the screen dump for your reference.

%E6%93%B7%E5%8F%96
擷取.PNG823×154 6.34 KB

2

如果你想要先 load data 在顯示 component, 你就需要搭配 Router 的 resolve 方法才能做到
單純靠 component 的生命週期是無法完成的

此外，盡量不要以 Promise 的方式去思考 RxJS，這樣會浪費 RxJS 本身帶來的好處
Angular 內建有 async pipe ，可以讓程式碼看起來更乾淨漂亮

3

那麼如何pass parameter 到resolver 裡面的service 呢?

4

文章裡面也有提到

 resolve(route: ActivatedRouteSnapshot): Observable<any> {
        let id = route.params['id'];
        return this.http.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
            .map(res => res.json());
    }