Angular2: как загрузить данные перед рендерингом компонента?

обновить

• Если вы используете маршрутизатор, вы можете использовать перехватчики жизненного цикла или преобразователи, чтобы отложить навигацию до прибытия данных. https://angular.io/guide/router#milestone-5-route-guards

• Для загрузки данных перед первоначальным рендерингом корневого компонента можно использовать APP_INITIALIZER Как передать параметры, отображаемые из серверной части, в метод начальной загрузки angular2

оригинал

Когда console.log(this.ev) выполняется после this.fetchEvent();, это не означает, что вызов fetchEvent() выполнен, это означает только то, что он запланирован. Когда выполняется console.log(this.ev), вызов сервера даже не выполняется и, конечно же, еще не вернул значение.

Измените fetchEvent(), чтобы вернуть Promise

     fetchEvent(){
        return  this._apiService.get.event(this.eventId).then(event => {
            this.ev = event;
            console.log(event); // Has a value
            console.log(this.ev); // Has a value
        });
     }

измените ngOnInit(), чтобы дождаться завершения Promise

    ngOnInit() {
        this.fetchEvent().then(() =>
        console.log(this.ev)); // Now has value;
    }

На самом деле это не принесет вам много денег для вашего варианта использования.

Мое предложение: оберните весь шаблон в <div *ngIf="isDataAvailable"> (template content) </div>

и в ngOnInit()

    isDataAvailable:boolean = false;

    ngOnInit() {
        this.fetchEvent().then(() =>
        this.isDataAvailable = true); // Now has value;
    }

Хорошее решение, которое я нашел, - это сделать в пользовательском интерфейсе что-то вроде:

<div *ngIf="isDataLoaded">
 ...Your page...
</div

Страница отображается только тогда, когда isDataLoaded имеет значение true.

Вы можете выполнить предварительную выборку своих данных с помощью преобразователей в Angular2 +. Разрешители обрабатывают ваши данные до полной загрузки вашего Компонента.

Есть много случаев, когда вы хотите загрузить свой компонент только в том случае, если что-то происходит, например, переходите на панель инструментов, только если человек уже вошел в систему, в этом случае резольверы очень удобны.

Посмотрите на простую диаграмму, которую я создал для вас, чтобы понять, как вы можете использовать преобразователь для отправки данных вашему компоненту.

Применить Resolver к вашему коду довольно просто, я создал для вас фрагменты, чтобы вы увидели, как можно создать Resolver:

import { Injectable } from '@angular/core';
import { Router, Resolve, RouterStateSnapshot, ActivatedRouteSnapshot } from '@angular/router';
import { MyData, MyService } from './my.service';

@Injectable()
export class MyResolver implements Resolve<MyData> {
  constructor(private ms: MyService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<MyData> {
    let id = route.params['id'];

    return this.ms.getId(id).then(data => {
      if (data) {
        return data;
      } else {
        this.router.navigate(['/login']);
        return;
      }
    });
  }
}

и в модуле:

import { MyResolver } from './my-resolver.service';

@NgModule({
  imports: [
    RouterModule.forChild(myRoutes)
  ],
  exports: [
    RouterModule
  ],
  providers: [
    MyResolver
  ]
})
export class MyModule { }

и вы можете получить к нему доступ в своем компоненте следующим образом:

/////
 ngOnInit() {
    this.route.data
      .subscribe((data: { mydata: myData }) => {
        this.id = data.mydata.id;
      });
  }
/////

А в Route примерно так (обычно в файле app.routing.ts):

////
{path: 'yourpath/:id', component: YourComponent, resolve: { myData: MyResolver}}
////