版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/h273979586/article/details/79853825
Angular提供了@Input和@Output语法来处理组件数据输入和输出。
@Input
Input输入属性，父组件向子组件传递信息。
父组件HTML代码：
<div>
这是父组件中输入值：<br><br>{{inputTransmission}}
</div>
<br>
<br>
<br>
<div>
<app-soon [soonInput]="inputTransmission"></app-soon>
</div>父组件Component.ts代码：
import { Component, OnInit,Input,Output } from '@angular/core';
@Component({
selector: 'app-father',
templateUrl: './father.component.html',
styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
inputTransmission:string="这是父组件给子组件（input值）";
constructor() { }
ngOnInit() {
}
}
子组件HTML代码：
<div>
这是子组件中接收父组件中的输入信息：
</div>
<br>
<div>
{{soonInput}}
</div>子组件Component.ts代码：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-soon',
templateUrl: './soon.component.html',
styleUrls: ['./soon.component.css']
})
export class SoonComponent implements OnInit {
@Input()
soonInput:string="这是子组件默认值";
constructor() {
}
ngOnInit() {
}
}父组件中inputTransmission变量值可以传递给子组件。
@Output
Output输出属性，子组件向父组件传递信息。Output不能向Input一样将值直接传递，需要用EventEmitter发射到父组件中。
父组件HTML代码：
<div>
这是父组件中输出值：<br><br>{{outputTransmission}}
</div>
<br>
<br>
<br>
<div>
<app-soon (soonOutput)="receive($event)"></app-soon>
</div>
父组件Component.ts代码：
import { Component, OnInit,Input,Output } from '@angular/core';
@Component({
selector: 'app-father',
templateUrl: './father.component.html',
styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
outputTransmission:string="这是父组件中output值";
constructor() { }
ngOnInit() {
}
receive(event){
this.outputTransmission=event;
}
}
子组件HTML代码：
<div>
这是子组件中要给父组件中的值：
</div>
<br>
<div>
{{soonOutput}}
</div>子组件Component.ts代码：
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-soon',
templateUrl: './soon.component.html',
styleUrls: ['./soon.component.css']
})
export class SoonComponent implements OnInit {
@Output()
soonOutput:EventEmitter<string>=new EventEmitter();
constructor() {
}
ngOnInit() {
this.soonOutput.emit("这是子组件给父组件的值output");
}
}子组件中soonOutput变量值可以传递给父组件。
子组件必须通过EventEmitter方法把值发射到父组件中，而且子组件发射的是事件，所以父组件接收时候是通过捕获发射事件来得到值。