小编给大家分享一下Angular父子组件间如何进行通信，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
创新互联成都企业网站建设服务，提供成都网站建设、网站制作网站开发,网站定制,建网站,网站搭建,网站设计,自适应网站建设,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:18982081108
组件是一个完整独立的，因此彼此之间的数据不会共享，想在组件之间共享数据，就要实现组件间的通信。【相关教程推荐：《angular教程》】
组件间通信
父组件向子组件通信
子组件向父组件通信
ng6为了实现组件间通信，提供了吞吐器：Input，Output
父组件向子组件通信
ng6基于ts实现，因此通信的数据要定义类型（了解内部的结构，分配内存空间）
父组件向子组件通信，子组件是接收方，因此要使用Input吞吐器
实现父组件向子组件通信分成6步
第一步父组件模板中，为子组件传递数据，如果数据是动态可变的，可以使用[]语法糖
第二步定义数据模型类（如果数据非常简单，可以省略该步）
定义模型类也可以使用ng指令
ng class 类名
模型类的命名规范：我们可以定义成.model.ts文件。也可以将文件直接放在models目录下，并定义成.ts文件
第三步子组件中，引入模型类
第四步子组件中，引入吞吐器Input
第五步通过吞吐器，接收数据，有两种方式
第一种 通过Input吞吐器注解类的方式，接收数据
@Input() 数据名称: 模型类;
第二种 还可以通过组件的注解元信息inputs接收
注解类中：inputs: [属性数据]
组件中：属性数据: 模型类;
第六步使用数据，由于数据被添加给组件自身了，因此不论是在组件中，还是在模板中都可以使用
举例：
// 4 引入吞吐器
import { Component, OnInit, Input } from '@angular/core';
// 3 引入模型类
import { Data } from '../../models/data';
@Component({
selector: 'app-inputs',
templateUrl: './inputs.component.html',
styleUrls: ['./inputs.component.css'],
// 5 通过元信息接收
inputs: ['color', 'data']
})
export class InputsComponent implements OnInit {
// 5 接收数据
// @Input() data: Data;
// @Input() color: string;
// 声明类型
data: Data;
color: string;
constructor() {
// 6 组件中使用
console.log(this)
}
ngOnInit() {
}
}子组件向父组件通信
子组件向父组件通信是基于自定义事件实现的。对于子组件来说，是发布方，因此要使用Ouput吞吐器
实现子组件向父组件通信分成六步
第一步在父组件模板中，模拟DOM事件，为子组件元素绑定父组件的方法，使用()语法糖
例如 (demo)="dealDemo($event)"
为了传递数据，要添加$event
第二步在子组件中，引入吞吐器 Output
第三步在子组件中，引入EventEmitter事件模块
第四步为子组件创建事件对象，有两种方式
第一种 通过Output吞吐器注册
@Output() 属性名称 = new EventEmitter()
第二种 还可以通过注解的元信息outputs接收
在注解中，注册属性 outputs: [属性名称]
组件中，创建事件对象 属性名称 = new EventEmitter()
第五步子组件中，通过事件对象的emit方法发布消息，参数就是传递的数据
第六步在父组件中，通过父组件方法，接收子组件传递的数据
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-outputs',
templateUrl: './outputs.component.html',
styleUrls: ['./outputs.component.css'],
// 元信息注册事件对象
outputs: ['sendMessage']
})
export class OutputsComponent implements OnInit {
// 4 注册事件对象
// @Output() sendMessage = new EventEmitter();
// 实例化
sendMessage = new EventEmitter();
constructor() { }
ngOnInit() {
}
// 事件回调函数
demo() {
// console.log(111, this)
// 5 点击按钮的时候，向父组件发布消息
this.sendMessage.emit({
msg: 'hello菜鸟',
color: 'red'
})
}
}以上是“Angular父子组件间如何进行通信”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
