Получите данные asyn c через @ViewChild - PullRequest
Новая
       19

Получите данные asyn c через @ViewChild

0 голосов
/ 28 марта 2020

Существует компонент Child , который делает запрос API и получает асинхронные c данные. Эти данные хранятся в свойстве count.

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

ParentComponent.ts 

@ViewChild('child', {static: false}) child: ChildComponent;
...
ngAfterViewInit() {
    this.number = this.child.count;
}
...

Вопрос

Поскольку свойство count является асин c, внутри ngAfterViewInit() I получить undefined. Как получить обновленную стоимость? Может быть ngOnChanges() или у меня что-то еще должно работать?

1 Ответ

1 голос
/ 28 марта 2020

Причина, по которой вы получаете неопределенное значение, заключается в том, что вы ожидаете значение до того, как данные asyn c станут доступны (я полагаю, что когда ваш запрос asyn c завершится). Вы можете использовать Event Emitter для отправки данных родителю. Таким образом, вы можете установить number в родительском элементе на значение count, только если оно у вас есть. Я также рекомендую прочитать руководство Component Interaction в официальных документах.

  1. Зарегистрировать источник событий в своем дочернем компоненте

ChildComponent 

@Output() countChanged: EventEmitter<any> = new EventEmitter();
Когда вы получаете данные, вы можете передать данные родителю: 
// ...Logic that gets the data
this.countChanged.emit(this.count);
//...
В родительском шаблоне вы можете привязать дочерний компонент и прослушивать дочерние события.

Родительский компонент HTML

<child-component (countChanged)="doSomethingWithCount($event)></child-component>`

Родительский компонент 

public doSomethingWithCount(count: number):void {
    this.number = count;
    //. . . More logic
}
...