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

Question

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

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

<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() 方法来处理更改。