Angular组件传值的几种方式

一、父子组件

1、父子之间的通信

​​​​​​​父向子传值（父组件通过属性传值给子组件，子组件通过@input方式来接受）

父组件
<app-parent [data]="data"></app-parent>
//默认值
private data:number = 1;
子组件
<app-child></app-child> 
  private _data: number;
  @Input('data')
  get data(): UserGroup {
    return this._data;
  }
  set data(v: number) {
    this._data= v;
    //这里可以获取最新的data数据，处理业务数据
  }

子向父传值（子组件通过@Output方式发出，父组件通过属性方式接受）

子组件
<app-child></app-child>
 //创建一个事件发射器
@Output("add") addEmitter = new EventEmitter<number>();
//默认值
data:number = 1;
//方法
addClick(){
 //发出事件
 this.addEmitter.emit(this.data++)
}

父组件(属性接受)
<app-parent [add]="getData($event)"></app-parent>
 
getData(data:number){
//这里可以打印获取到的值
 console.log(data)
}

2、@ViewChild父组件获取子组件的引用

父组件（@ViewChild(子组件名)变量:子组件名）

@ViewChild(ChildComponent) child:ChildComponent;

parent(){
 //调用子组件的方法
  this.child.addData()
}


子组件

<app-child></app-child>
//默认值
data:number =1;
//方法
addData(){
  this.data++;
}

3、注册服务

创建一个service，组件里注入服务，一个组件发送数据，一个组件接受数据

servce.ts

$data = new Subject<number>;

component1.ts
//注入服务
constructor(private serve:Service) {}
//定义默认值
data:number = 1;
//发送数据
sendData(){
  this.serve.next(this.data)
}

component2.ts

 constructor(private serve:Service){ 

  //监听值的变化
  this.serve.$data.subscribe((data:number)=>{
    //获取到变化的值
    console.log(data)
 })
}

​​​​​​​

二、两个毫不相关的组件（同父子组件的注册服务）