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方法把值发射到父组件中,而且子组件发射的是事件,所以父组件接收时候是通过捕获发射事件来得到值。
实例下载
https://download.csdn.net/download/h273979586/10333970