Angular 5 子组件与父组件实现数据双向绑定

原创于 2018-02-21 20:13:54 发布 · 2.3k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何在Angular中实现父组件与子组件之间的数据双向绑定。通过使用本地变量和自定义指令的方式，可以在父组件和子组件的input元素间实现数据的实时同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 实现父组件和子组件间数据的双向绑定

2. 描述：子组件和父组件间，各有一个<input>标签，在父组件input 内容，子组件的input 标签上同步，在子组件的input 上输入内容，父组件input 标签页同步

3. 具体实现：

在父组件html中写如下代码

子组件input标签
<home-input #homeinput></home-input>

父组件input标签
<input [(ngModel)]="homeinput.hero" >

#homeinput 为组件间通过本地变量互相通讯

在子组件html中写如下代码

如上写即可实现