组件是完整独立的，彼此之间数据是不会共享的。

1.9组件间通信

组件是完整独立的，彼此之间数据是不会共享的。为了实现数据的共享，我们要实现组件间通信

所以组件之间通信，就是实现组件之间传递数据的。

通常有两个方向

父组件向子组件通信

子组件向父组件通信

ng6为了实现组件间通信，提供了吞吐器技术。Input， Ouput

1.9.1父组件向子组件通信

实现父组件到子组件通信，我们需要六步

第一步 为子组件添加属性数据

如果数据中数据变量，我们可以使用[]语法糖

第二步 定义数据模型类（如果数据比较复杂，我们要定义数据模型）

通常我们要创建文件，表示数据模型， .model.ts, 模型是一个类，所以有时候也可以将文件定义成.ts

创建类:  ng g class 模型类文件名称

我们创建模型类文件，要添加目录

第三步 子组件中引入模型类

第四步 子组件中，引入吞吐器Input。

第五步 用吞吐器接收数据，有两种方式

第一种，在组件类中，通过Input吞吐器接收,通过注解的形式接收

语法  @Input() 属性名: 模型类

第二种，在Component注解类中，通过inputs属性接收数据,分成两步

第一步 定义接收数据的属性

inputs: []

每个成员代表一个属性名称

第二步 在组件中，定义接收数据的数据结构

属性名: 模型类

第六步 使用数据

接收的数据会存储在组件实例化对象上，因此我们可以在组件中使用，也可以在模板中使用

下午复习

样式

外链式：styleUrls: []

内嵌式：styles: []

行内式：style=””

动态设置样式

[style.color]=””

[ngStyle]=”{}”

插值： {{}}

DOM事件： (click)=”fn($event)”

事件修饰符 (keyup.enter)=””

change=””

临时模板变量 #demo

组件 ng g component demo

父组件到子组件通信 1 属性， 2 model， 3 引入model，4 Input， 5 注册数据， 6 使用

5 注册数据

1 @Input() key: Data;

2 inputs: []  key: Data;

1.9.2父组件向子组件通信

ng6也是基于事件机制实现子组件向父组件通信的，对于子组件来说，要将数据传递（吐）给父组件，就要使用Output吞吐器。

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

第一步 在父组件中，为子组件注册自定义事件
 注册自定义事件要使用()语法糖，想传递数据，我们要传递$event参数

第二步 在子组件中，引入吞吐器Ouput

第三步 在子组件中，引入自定义事件类EventEmitter

第四步 在子组件中，通过吞吐器，实例化事件对象，有两种方式

第一种 组件类中，通过吞吐器实例化事件对象

@Ouput() 属性事件对象 = new EventEmitter()

第二种 分成两步

注解中，注册属性事件对象

outputs: []

组件类中，实例化事件对象

属性事件对象 = new EventEmitter()

第五步 通过属性事件对象的emit方法，发布消息，参数就是传递给父组件的数据

第六步 在父组件中，接收数据并使用数据。