iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >一文详解Angular父子组件间传数据的方法
  • 285
分享到

一文详解Angular父子组件间传数据的方法

javascriptAngular 2023-05-14 21:05:49 285人浏览 安东尼
摘要

子传父 @Output()angular通过事件(Event)来实现子组件通知父组件数据的改变,父组件需要订阅该事件。1. 子组件定义@Output子组件定义@Outputexport class ChildComponent { /

子传父 @Output()

angular通过事件(Event)来实现子组件通知父组件数据的改变,父组件需要订阅该事件。

1. 子组件定义@Output

子组件定义@Output

export class ChildComponent {

  // EventEmitter ,这意味着它是一个事件
  // new EventEmitter<string>() - 
  // 使用 Angular 来创建一个新的事件发射器,它发出的数据是 string 类型的。
  @Output() newItemEvent = new EventEmitter<string>();

  addNewItem(value: string) {
    this.newItemEvent.emit(value);
  }
}

子组件当数据发生变化时,调用这个addNewItem方法既可。例如,html

<label>Add an item: <input #newItem></label>
<button (click)="addNewItem(newItem.value)">Add to parent's list</button>

2. 父组件订阅事件

1、父组件的ts代码中,增加一个处理上面事件的方法,例如

addItem(newItem: string) {
    // logic here
}

2、父组件的html中,订阅该事件。

<child-component (newItemEvent)="addItem($event)"></child-component>

事件绑定 (newItemEvent)='addItem($event)' 会把子组件中的 newItemEvent 事件连接到父组件的 addItem() 方法。

总结

  • 使用@Input() 和 @Output() 可以很方便的实现父子组件之间的数据传递、共享。

  • 可以同时使用 @Input() 和 @Output()

以上就是一文详解Angular父子组件间传数据的方法的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: 一文详解Angular父子组件间传数据的方法

本文链接: https://www.lsjlt.com/news/206619.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作