Загрузка компонента Angular 5 после загрузки gapi - PullRequest
Новая
       8

Загрузка компонента Angular 5 после загрузки gapi

0 голосов
/ 06 июня 2018

Я пишу угловое 5 приложение, используя CLI.Я использую gapi для извлечения пользовательских данных для заполнения формы.

Клиентский скрипт включен в файл index.html: 

<head>
  <meta charset="utf-8">
  <script src="https://apis.google.com/js/client.js"></script>
  ...
</head>

Вот мой компонент с вызовом:

userProfileModel: UserProfileModel = new UserProfileModel();

ngOnInit() {
  this.form = this.toFormGroup();
  this.onFormChanges();

  this.userService
      .getUserById(this.userId)
      .then(usr => {
        this.mapModel(usr.result['profile']);
      })
      .then(() => {
        this.form.patchValue(this.userProfileModel);
      });
}

И метод userService: 

declare var gapi: any;

export class UserService {

  getUserById(id: number) {
    return gapi.client.request({
      method: 'GET',
      'path': this.constants['endpoint_user_getbyid'] + '/' + id,
      'root': this.constants['api_url']
    });
  }
  ...
}

Проблема в том, что gapi, похоже, не инициализируется сразу после завершения загрузки моего компонента: я должен установить тайм-аут> 500 мс, чтобыбыть в состоянии использовать это, и это уродливо.

Этот код дает мне следующую ошибку:

ОШИБКА TypeError: Невозможно прочитать свойство 'request' из неопределенного

Пожалуйста, не:

1 - Я ничего не установил с npm / yarn, я просто использую скрипт с объявлением gapi var.
2 - после каждой сборки код работает безлюбая ошибка и заполняет мою форму при первой загрузке страницы, а затем после одного обновления она каждый раз завершается сбоем.

Как я могу сказать angular загружать client.js при запуске перед всеми компонентами?

Спасибо!

1 Ответ

0 голосов
/ 11 июня 2018

Благодаря @ADarnal я, наконец, нашел решение, прочитав эту тему:

Как передать параметры, отрисованные из бэкэнда, в метод начальной загрузки angular2

Я следовал тому жеточный процесс описан в ответе computeiro.
Мой эквивалент класса "BackendRequestClass" - GapiService.

В этом сервисе Gapi метод загрузки позволяет мне загружать gapi перед выполнением любого другого вызова: 

/* GapiService */

loadGapi() {
  return new Promise((resolve, reject) => {
    gapi.load('client', () => {
      gapi.client.init({apiKey: 'AIzaSyD5Gl9...'}).then(() => {            
        resolve(gapi.client);
      })
    });
  });
}

// Method used in any component
getUserById(id: number) {
  return gapi.client.request({
    method: 'GET',
    'path': this.constants['endpoint_user_getbyid'] + '/' + id,
    'root': this.constants['api_url']
  });
}

Наконец;в моем компоненте я внедряю этот gapiService и могу использовать client.request для компонента init! 

ngOnInit() {
  this.gapiService
      .getUserById(5066549580791808)
      .then(
        ...
  });
...