Angular组件交互

Angular2中的组件交互方式很多，可分为父子组件交互和非父子组件交互两种情况。

在学习之前需要了解组件的@Input和@Output的用法

1//子组件中内容
2@Input() 绑定的属性名: 值类型;  //其值等于在父模板中绑定变量的值
3
4//父组件模板中
5<子组件标签 [绑定的属性名]="变量"></子组件标签>
6
7//父组件类中
8定义变量值...

**@Input**修饰的“属性名”属于输入属性，这个输入属性从其父组件中获取数据。Input就是把父组件中的数据拿到子组件中处理。注意Input()只有指令才能设置别名

1//子组件
2import { EventEmitter, Output } from '@angualr/core'
3
4...
5
6@Output() 绑定的属性名: new EventEmitter<值类型>;
7
8export class ...{
9  ...
10  某个方法() {
11    this.绑定的属性名.emit(发送的东西）;
12  }
13}
14
15//子组件模板
16<p (事件)="某个方法">...</p>
17
18//父组件模板
19<子组件标签 (绑定的属性名)="父组件方法($event)"></子组件标签>
20
21//父组件类
22父组件方法(形参_接收到的东西) {
23  //表达式
24  ...
25}
26

**@Output**是以事件的形式，将数据通过EventEmitter抛出去。@Output就是在子组件模板触发事件，并返回内容到父组件中响应事件。这个东西书上还有一个名字叫做自定义事件。

父组件向自子组件传递数据

父组件的数据通过子组件的输入属性流入子组件，在子组件完成接收拦截。

接收数据的方法即上面所说的**@Input**。拦截处理方法有两种，setter拦截输入属性和ngOnChanges监听数据变化。

setter拦截输入属性

setter和getter通常配套使用，setter可以对属性进行再封装处理，在通过getter返回处理过的属性值。

比如:

1@Input()
2  set 绑定的属性名(形参接收的值: 值类型) {
3    //数据处理
4  }
5  get 绑定的属性名(){return 上面数据处理的结果}

ngOnChanges监听数据变化

ngOnChanges是Angular2组件的生命周期钩子之一，该方法接收一个对象参数，包含当前值和变化前的值。在ngOnInit之前，或当该组件数据绑定的输入属性值发生变化时会触发。

SimpleChange是Angular的一个基础类，用于处理数据的前后变化，包含两个重要的成员变量，previousValue和currentValue。

1import { SimpleChanges,OnChanges } from '@angular/core';
2
3  cc:Array<any>=[];
4  ngOnChanges(changes: SimpleChanges) {
5    for (let aa in changes) {                 //不知道怎么监听指定输入属性...好了先不管他
6      let chng = changes[aa];
7      let cur  = chng.currentValue;
8      let prev = JSON.stringify(chng.previousValue);   //可以设置格式
9      this.cc.push(`${cur},${prev}`);
10    }

子组件向自父组件传递数据

除了上面的@Output以外，父组件对子组件的引用还有很多方法，这里学习两种：

父组件通过局部变量获取子组件引用
父组件使用@ViewChild获取子组件的引用

通过局部变量获取子组件引用

使用Angualar中的局部模板变量，通过在父组件的模板中为子组件创建一个局部变量，来获取子组件公共成员变量和函数的权限，其作用域范围仅存在于定义该模板局部变量的子组件中。

在父组件模板中的子标签上绑定一个局部变量（用#标记），来获取子组件类的实例对象。

1//父组件中
2<子组件标签 (事件)="模板变量.子组件方法或属性" #模板变量></子组件标签>

使用@ViewChild获取子组件的引用

模板变量只能在模板中使用，不能在父组件类里使用。

如果父组件需要获取到子组件中变量或者方法的读写权限时，可以通过@ViewChild注入的方式实现。

1@ViewChild(子组件类名/模板局部变量） 名字: 子组件类;
2
3//现在就可以在父组件中引用子组件了。

非父子组件交互

非父子组件之间的交互主要通过服务来完成，注意服务要用@Injectable表示该服务可注入依赖，虽然不是必须的，但还是加上的好。

1//服务类A
2import { Injectable } from '@angular/core';
3
4import { 组件A } from './组件A';
5
6@Injectable()
7export class ServiceA {
8  .......
9  //对组件A的数据什么的进行操作,返回数据什么的
10}

简单来说，就是创建一个服务类A，对组件A进行操作，比如说获取数据什么的。然后在组件B中导入服务A，实例化服务A，然后就可以调用它的方法，间接取得组件A的数据什么的。

1  //组件B
2  import { Component, OnInit } from '@angular/core';
3
4  import { ServiceA } from './servicea';
5
6  ...
7  providers: [ServiceA]    //注册一下,创建一个服务A的实例
8  ...
9
10  export class AppComponent implements OnInit {
11  
12  constructor(private servicea: ServiceA) { }  //定义一个私有属性
13
14  函数(): void {
15    this.servicea.里面的方法();
16  }
17  ngOnInit(): void {
18    this.函数();
19  }