Angular2 组件交互实例

1、1. 组件通信组件之间的交互方式主要有如下几种：l 使用输入型绑定，把数据从父组件传到子组件l 通过 setter 拦截输入属性值的变化l 使用 ngOnChanges 拦截输入属性值的变化l 父组件监听子组件的事件l 父组件与子组件通过本地变量互动l 父组件调用 ViewChildl 父组件和子组件通过服务来通讯2. 输入型绑定输入型绑定指的是利用模板语法中的属性型绑定方式，将父组件的数据传递到子组件对应的对象中，子组件中的对象一般使用@Input装饰器来修饰，作为数据的接受者，例如

3、4. ngOnChangessetter函数可以响应输入数据的变化外，Angular2还提供了一个生命周期函数ngOnChanges 可以监听数据的变化。使用 OnChanges 生命周期钩子接口的 ngOnChanges 方法来监测输入属性值的变化并做出回应。改造以上的子组件来响应对应的变化，在这个示例中，监听了输入数据的变化，采取的对应动作仅仅是输出对应的信息，也可以做很多其他的事情。

5、在上面的例子中，在子组件ChildComponent添加了一个向外传播的事件output:EventEmitter<stri荏鱿胫协ng> = new EventEmitter<string>()，并添加了一个点击的按钮，当按钮事件触发时，就会调用output事件向父组件传递事件，并将数据作为参数传递到父组件ParentComponent中，同时在父组件ParentComponent的模板<child [input]="data" (output)="output($event)"></child>中可以看到，使用模板语法中的事件绑定，绑定了output函数作为对应事件的接受函数，当子组件output事件触发是，父组件的函数就会得到执行。使用事件传播来进行子组件对父组件之间的通信是最常见的方式。6. 本地变量在模板语法中，知道存在着本地变量这种语法，可以使用本地变量来代表对应的组件。虽然父组件不能使用数据绑定来读取子组件的属性或调用子组件的方法。但可以在父组件模板里，新建一个本地变量来代表子组件，然后利用这个变量来读取子组件的属性和调用子组件的方法，不过这种使用方式只能在模板中使用，例如如下所示，改写上面例子中的父组件模板，代码如下。在ParentComponent组件中使用本地变量#child获取了child组件的实例，这样就可以在模板中使用其属性或者方法，例如child.input。

7、在以上的代码中，使用@ViewChild(ChildComponent)注解的形式畛粳棠奈获取了对应子组件childComponent的实例，这样在父组围泠惶底件类中就可以调用子组件对应的属性及方法了。相对于本地变量的方式而言，ViewChild的方式更加灵活，用途也比较广泛。但是，需要注意的一点是，必须等待父组件的视图显示完成后才可以使用，ngAfterViewInit 生命周期钩子是非常重要的一步。8. 服务方式通过服务依赖注入的方式，我们可以了解到，服务在父子组件之间是可以共享的，可以利用共享的服务的形式在父子组件之间进行通信。将服务实例的作用域被限制在父组件和其子组件内，这个组件子树之外的组件将无法访问该服务或者与它们通讯。父子之间使用服务的方式来通行，是采用事件消息的形式来实现的。如下的代码中，父子组件中共享了Service服务，并在各自的类中获取了Service服务的实例，当分别点击父子组件中的按钮时，就能够触发Service服务中的对应的input$以及output$，因为服务是共享的，在父子组件中监听对应的服务信息，就能够得到传递的消息。