Angular中父子组件间如何实现有效通信？

本文共计1221个文字，预计阅读时间需要5分钟。

本章节带大家了解Angular中组件通信，介绍父子组件之间、子组件向父组件通信的方法，希望对大家有所帮助！组件通信 + 组件是独立的，因此彼此之间需要通过某种方式传递信息。

本篇文章带大家了解一下Angular中的组件通信，介绍一下父组件向子组件通信、子组件向父组件通信的方法，希望对大家有所帮助！

组件通信

组件是一个完整独立的，因此彼此之间的数据不会共享，想在组件之间共享数据，就要实现组件间的通信。

组件间通信

• 父组件向子组件通信

• 子组件向父组件通信

ng6为了实现组件间通信，提供了吞吐器：Input，Output

父组件向子组件通信

ng6基于ts实现，因此通信的数据要定义类型（了解内部的结构，分配内存空间）

父组件向子组件通信，子组件是接收方，因此要使用Input吞吐器

实现父组件向子组件通信分成6步

第一步 父组件模板中，为子组件传递数据，如果数据是动态可变的，可以使用[]语法糖

第二步 定义数据模型类（如果数据非常简单，可以省略该步）

定义模型类也可以使用ng指令

ng class 类名

模型类的命名规范：我们可以定义成.model.ts文件。