Angular: как вызвать функцию после того, как компонент получил входные данные

Question

У меня есть родительский и дочерний компоненты.В родительском я ищу пользователя и передаю userId через @Input своему дочернему компоненту.Это работает.

После того, как мой дочерний компонент получает значение, я хочу вызвать функцию, чтобы получить карту от пользователя обратно.Как мне это сделать?Я всегда получаю карту - неопределенная ошибка.

<p (show)="serachForCard()">
  User: {{userId}}
  Card: {{card.id}}
</p>

Моя идея состояла в том, чтобы вызвать функцию, но она все еще не работает.

Функция в моем файле TS:

serachForCard() {
        this.cardService.getCardByUserId(this.userId)
            .subscribe(
                (data: Card) => this.card= data
            )
    }

Answer 1

Реализуйте OnChanges интерфейс внутри вашего дочернего компонента и вызывайте вашу функцию из ngOnChanges метода.

@Component({
    ...
})
export class MyComponent implements OnChanges {
    @Input() someInput: string;

    ngOnChanges(): void {
        // do something with this.someInput
    }
}

Документация: OnChanges

Хук жизненного цикла, который вызывается при изменении какого-либо связанного с данными свойства директивы. Определите метод ngOnChanges () для обработки изменений.