Angular 17 系列（十七）检测 @Input 值的变化

小渣渣

Angular 中 @Input()、@Output() 并允许 Angular 在父上下文和子指令或组件之间共享数据。

组件如何检测 Input 值的变化呢？之前的解决方案参考如下：

Angular 9 系列（八）更新子组件的值通过set触发事件
https://www.itsvse.com/thread-9267-1-1.html

其实可用通过 ngOnChanges 方法可用检测 Input 值的变化，OnChanges 当指令的任何数据绑定属性发生更改时调用的生命周期挂钩，定义 ngOnChanges() 处理更改的方法。

文档：https://docs.angular.lat/api/core/OnChanges

新建 HelloComponent 组件，代码如下：

登录可见。

页面代码：

登录可见。

父组件 AppComponent 代码如下：

登录可见。

页面代码如下：

登录可见。

效果图如下：



（完）

小渣渣

angular 双向绑定：https://angular.dev/guide/templates/two-way-binding