组件间通信
父组件向子组件通信
子组件向父组件通信
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' }) }}编程入门！！