一.通过setter 截听输入属性值的变
利用getter setter对值进行获取和处理
二. ngOnChanges()来截听输入属性值的变化
监测输入属性值的变化
当需要监视多个、交互式输入属性的时候，本方法比用属性的 setter 更合适。
三.父组件监听子组件的事件(组件输入输出)
@Input() name = '';//父组件->向子组件传递数据。
@Output() voted = new [EventEmitter]<boolean>();//父组件可以获取子组件的信息，同时父组件要创建html监听
EventEmitter是node.js的一个监听器。
四.父级调用 @ViewChild()
@ViewChild可以获取到当前组件视图中的单个元素
@ViewChildren获取子组件对象列表
1.局部变量访问
@ViewChild('changeColor',{static:true}) changeColor;
2.直接指定组件类
父类的html
<app-home [items]="items" #home ></app-home>
<!-- #home要写在子控件的里面 -->
<button (click)="appComponentAction()" >父级点击这里</button>
父类的Ts
// 子类的声明
@ViewChild('home',{static:true}) home:HomeComponent;
// 实现点击事件
appComponentAction(): void{
// 通过home子类调用属性和方法
this.home.textColor1 = 'd';
this.home.run();
}
}
子类只需要实现这俩个方法和公开属性就好
@Input()
set textColor1(value:string){
console.log('textcolor:'+value);
this.textColorStr = value;
}
get textColor1():string{
return this.textColorStr ;
}
run(){
console.log('running');
}
