Angular5 父子组件之间的通信

一、父组件向子组件通信

父组件：

1.引入（在父组件的module.ts中引入）
import { ChildModule } from '../../child/child.module';
imports:[
  ChildModule
]
 
2.使用
<comment [numberId]="numberId" [aaanum]="aaanum" [isCan]="isCan"></comment>

3.声明变量
public numberId: number;
public aaanum: number;
public isCan: boolean;

子组件：

1.引入
import { Input } from '@angular/core';
 
2.声明
@Input() numberId: number;
@Input() aaanum: number;
@Input() isCan: boolean;
 
3.使用
ngOnChanges() {
     // 在这里 就可以取到 数据
     console.log(this.numberId);
}

<p>{{numberId}}</p>

---

二、子组件向父组件通信

父组件：

1.引入（在父组件的module.ts中引入）
import { ChildModule } from '../../child/child.module';
imports:[
  ChildModule
]
 
2.使用
<upload (childParam)="getData($event)"></upload>
 
getData(msg: string) {
    console.log("子组件传过来的数据",msg)
}

子组件：

1.引入
import { Output, EventEmitter } from '@angular/core';
 
2.声明
@Output() childParam = new EventEmitter();
 
3.使用
this.childParam.emit('我是要传送的数据');