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

Question

У меня есть два компонента: родительский и дочерний

parent разрешает обещание в конструкторе, child отображает результат обещания в виде параметра @Input ()

ребенок не получает результат обещания в хуке жизни, кроме afterViewCheck и afterContentCheck, я хочу их избежать.

Я также хочу, чтобы избежать общего сервиса, содержащего общие данные в поведениеSubject или что-то в этом роде

поэтому вопрос в том, можно ли дождаться обещания, прежде чем создавать шаблон с результатом обещания в качестве входного параметра?

Родитель:

// html: <app-chil [brands]="brands"></>

brands: Brand[] = []

constructor() {
  this.getBrands()
}

async getBrands() {
  this.brands = await new Promise<Brand[]>(resolve => 
    this.equipmentService.getBrands().subscribe(brands => resolve(brands)))
}

ребенок:

@Input() brands: Brand[] = []

constructor() { }

ngAfterViewInit() {
  console.log(this.brands) // receive brands here
}

Answer 1

С сеттером вам не нужно использовать какой-либо крючок жизненного цикла и его очиститель.

brands: Brand[] = [];

constructor() {
   this.getBrands()
}

async getBrands() {
  this.brands = await new Promise<Brand[]>(resolve => 
    this.equipmentService.getBrands().subscribe(brands => resolve(brands)))
}

ребенок:

private _brands: Brand[] = [];
@Input() set brands(data: Brand[]) {
    this._brands = data;
    console.log(data);
}

constructor() { }

Answer 2

Сделайте наблюдаемое из обещания и передайте его наблюдаемому ребенку, а затем используйте простую интерполяцию с асинхронным каналом.

Вот пример. Прочитайте его и адаптируйте к своему приложению (оно протестировано как есть).

ребенок:

import { Component, Input } from '@angular/core';
import {Observable} from 'rxjs';

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name | async}}!</h1>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: Observable<string[]>;


}

Родитель:

import { Component } from '@angular/core';
import { of } from 'rxjs';
/* import { from } from 'rxjs'; //import 'from' to convert your promise to observable*/

@Component({
  selector: 'my-app',
  template: `<hello [name]="name"></hello>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = of("angular"); //name = from(yourPromise)
}