angular之交互

一.通过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');
}

五.父和子通过服务通信