Angular 组件交互(一)@Output

Photo by Stefan Widua on Unsplash

再看 @Input

上一篇提到,Angular 利用 @Input 让父元素与子元素进行单向数据传递。

这种数据传递的关系类似于函数传参,是自上而下的方式。

@Output 与之差别

而子元素与父元素数据传递的问题,是自下而上的。

在这种情况下,

可以通过子元素内部触发事件,父元素订阅事件的方式来传递变化的数据。

在 Angular 中,这种机制需要我们使用 EventEmitter 来完成。

这也是 @Output 的形式与 @Input 最大的不同。

@Output 用法

经过 @Output 函数的修饰,我们就可以将一个变量作为一个事件进行触发。

然后由父组件捕获这个事件并获取传递的参数。最后的结果是这样的。

经过构造的子组件如下所示。 下面来一一分析。

修饰事件变量

在子组件中,我们需要用 @Output 来修饰我们的 chang 变量。

它是一个 EventEmitter 类型的对象。

编写触发器

为了触发这个事件,我们编写一个触发器(函数)来触发它。

函数名称为 OnClick,此函数在按钮被按下时调用。

发出变量

然后我们可以利用 OnClick 来调用事件变量 change,

由 change 发出(emit)变量 count 给响应此事件的父组件。

大功告成

父组件通过 () 语法就可以订阅这个事件,然后针对性的做更多的操作啦。

这里再父组件中利用 onChange 就可以对订阅的事件做进一步处理。

在线例子

我编写了在线例子,结合本文,可以迅速掌握 @Output 的基本用法。

参考链接

Parent listens for child event

相关阅读

Angular 组件化之 @Input

发表评论

电子邮件地址不会被公开。 必填项已用*标注