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
    }
}

Documentation: OnChanges

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

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

1 个答案: