在本篇中,将介绍基本的父子组件、兄弟组件、任意组件之间的数据通信方式。
Parent to Child via Input Decorator
父组件向子组件传递数据的时候,可以使用在子组件中使用Input Decorator
,这样在父组件中就可以通过模板传递给子组件。
1 | // parent.component.ts |
1 | // child.component.ts |
Child to Parent via ViewChild
ViewChild 允许将一个组件注入另一个组件,使父组件可以访问其属性和功能。但有一点需要注意的是,在视图初始化之后,子组件才可用。这意味着我们需要实现 AfterViewInit 生命周期钩子来接收来自子组件的数据。
1 | // parent.component.ts |
1 | // child.component.ts |
Child to Parent via Output and EventEmitter
子组件还可以通过emit
的方式将数据广播出去,这样可以在子组件需要通过事件触发来传递数据到父组件。
1 | // parent.component.ts |
1 | // child.component.ts |
Share data between any components
当组件间没有直接的关系的时候,我们可以创建一个共享服务,然后通过Rxjs
中的BehaviorSubject
来存储数据,这样每个组件通过订阅这个数据,当这个数据发生变化的时候,都可以获得最新的数据。
1 | // data.service.ts |
1 | // parent.component.ts |
1 | // siblings.component.ts |
Other Library For Angular State Management
- 本文链接: https:https://whyour.cn/post/sharing-data-between-angular-component.html
- 最后更新于:
- 版权声明: 本博客所有文章除特别声明外,均采用 署名 4.0 国际(CC BY 4.0) 许可协议。转载请注明出处!
hexo博文摘要生成方案
javascript 中的 es6 技巧