Angular：组件获取输入数据后如何调用函数答案

【问题标题】：Angular: How to call function after the component got the Input dataAngular：组件获取输入数据后如何调用函数
【发布时间】：2019-09-12 08:56:59
【问题描述】：

我有一个父子组件。在父级中，我正在搜索用户并通过 @Input 将 userId 提供给我的子组件。这是有效的。

在我的子组件获得值后，我想调用一个函数，以便从用户那里取回卡片。我该怎么做呢？我总是得到一张卡是未定义的错误。

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

我的想法是调用一个函数，但它仍然不起作用。

我的 ts 文件中的函数：

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

【问题讨论】：

Angular2 Call Function When the Input Changes的可能重复

标签： html angular data-binding

【解决方案1】：

在您的子组件中实现OnChanges 接口并从ngOnChanges 方法调用您的函数。

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

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

Documentation: OnChanges

当指令的任何数据绑定属性更改时调用的生命周期挂钩。定义一个 ngOnChanges() 方法来处理更改。

【讨论】：