通过输入绑定来从父组件向子组件传值
使用@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中
}