пытаясь заставить Angular 2 ждать загрузки данных перед рендерингом - PullRequest
Новая
       7

пытаясь заставить Angular 2 ждать загрузки данных перед рендерингом

0 голосов
/ 24 апреля 2018

У меня есть несколько файлов XML, которые мне нужно загрузить перед начальным рендерингом. Что у меня есть app.module.ts 

import { DataProvider } from './xml-provider'

export function dataProviderFactory(provider: DataProvider) {
  return () => provider.load();
}

providers: [
    DataProvider,
    { provide: APP_INITIALIZER, useFactory: dataProviderFactory, deps: [DataProvider], multi: true }
  ],

тогда в xml-provider.ts 

load(){
  let promises:Promise<any>[] = [];
  promises.push(this.loader1());
  promises.push(this.loader2());

  Promise.all(promises).then(
    (values) => { 
      console.log("Promise all finished: " + values);
      return true; 
    }
  );
}



  private loader1():Promise<any> {
    return new Promise((resolve, reject) => {
      this.http.get('assets/data.xml')
        .map(res => {
          let data;
          parseString(res.text(), { trim: true } ,function (err, result) {
            data = result.xml;
          });
          this.xmldata = data;
        })
        .subscribe(data => { resolve(true); })
    })    
  }

Когда у меня в качестве функции загрузки был loader1, Angular действительно ждал, пока файл загрузится, и все будет хорошо. Теперь, когда я добавил больше файлов, он не ждет загрузки для возврата. Что я упустил, чтобы app.module.ts дождался загрузки всех файлов?

1 Ответ

0 голосов
/ 24 апреля 2018

Перед Promise.all отсутствует return. Я надеюсь, что это решит проблему. 

load(){
  let promises:Promise<any>[] = [];
  promises.push(this.loader1());
  promises.push(this.loader2());

  //// Missing return was here
  return Promise.all(promises).then(
    (values) => { 
      console.log("Promise all finished: " + values);
      return true; 
    }
  );
}
...