angular组件之间的通信（父组件传值给子组件）

通过输入绑定来从父组件向子组件传值
使用@input修饰器

父组件命名app-parent
子组件命名app-child

1、传值给组件的属性——核心@Input()
官方定义：一个input属性是指用@Input修饰器注释的可设置属性，当数据与值绑定时，值流入该属性。

在子组件app-child内定义入口属性（我是这么称呼的）

//导入修饰器组件
import {Input} from '@angular/core';
export class ChildComponent implements OnInit {
    ...
    //声明入口属性名称及类型
    @Input() data: string;
	...
}

在父组件app-parent的html中引用子组件，并通过data入口属性传值到组件内部:

<app-child  data="data1"></app-child>
<app-child  [data]="'data2'"></app-child>
以上是两种属性赋值方式

2、拦截单个传入的变量——核心@input() set
在子组件app-child内用set定义入口方法

 //声明入口属性名称及类型
@Input() set value(data: string) {
    this.data = data + '!!!!';
};

通过入口方法传值到组件内部：

<app-password-login value="'data1'"></app-password-login>
<app-password-login [value]="'data2'"></app-password-login>

注意属性名称变成了方法名，如需要拦截两个不相关的变量时，可以写两个set方法，如两个变量需要一起进行计算则使用下面的方法

3、拦截多个传入的变量——核心ngOnChanges
官方定义：在angular设置或者重新设置数据绑定的输入属性时响应，这个方法接收一个包含了当前和之前属性值的SimpleChange对象，在ngOnInit之前被调用，无论有一个或者多个数据绑定属性改变时被调用

//导入组件库
import {OnChanges, SimpleChange} from '@angular/core';

@Input() data1: string;
@Input() data2: string;
ngOnChanges(changes: {[propKey: string]: SimpleChange}) {
	//data1和data2的新值、旧值都在changes中
}