Порядок Angular построение зависимости зависимости - PullRequest
Новая
       8

Порядок Angular построение зависимости зависимости

0 голосов
/ 14 апреля 2020

В моем приложении Angular есть служба user-serial-service, которая выполняет один API-вызов для извлечения серийного пользователя в виде строки, а затем сохраняет это значение в BehaviourSubject

. использовать этот сериал в конструкторе моего app.component, но я обнаружил, что вызов API для получения сериала не завершается до того, как сработает конструктор app.component, и поэтому userSerial$ не определено.

Это, как я полагаю, объясняется тем, что app.component является первым компонентом, генерируемым Angular, и, следовательно, первым конструируемым компонентом, то есть вызов API службы не будет завершен sh до того, как приложение .component создан.

Это заставляет меня задуматься, как именно Angular инстанцировал свои зависимости и в каком порядке. Если бы я хотел сначала создать сервис, чтобы его API-вызов завершился до sh до создания экземпляра app.component, было бы это возможно? Сначала создается App.Component, а затем создаются все его перечисленные зависимости? 

export class AppComponent {

    constructor(private _userSerialService: UserSerialService) {
        console.log("User serial: ", this._userSerialService.userSerial$.getValue()); //userSerial$ is undefined
    }
}

export class UserSerialService {

    public userSerial$: BehaviorSubject<string>;

    constructor(private _http: HttpClient) {
      this.getUserSerial().pipe(take(1)).subscribe(res => {
        this.userSerial$ = new BehaviorSubject<string>(res.body.serial)
      })
    }

  }

1 Ответ

1 голос
/ 14 апреля 2020

В вашем случае вы должны использовать APP_INITIALIZER для выполнения вызова API в ускоренном режиме приложения (я не смогу дать вам длинный ответ о том, как его реализовать, но вы, возможно, сможете найти много учебников в Google).

Так что, когда AppComponent будет инициализирован, userSerial будет доступен. Но будьте осторожны со временем, требуемым для запроса API, поскольку это может замедлить инициализацию приложения.

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

Итак, в вашем случае:
* начало создания AppComponent
* создание службы начинается с асинхронное выполнение
* создание AppComponent заканчивается
*, позже асинхронный код завершается

...