Angular提供了@Input和@Output语法来处理组件数据输入和输出。
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不能向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=new EventEmitter();
constructor() {
}
ngOnInit() {
this.soonOutput.emit("这是子组件给父组件的值output");
}
}
子组件中soonOutput变量值可以传递给父组件。
子组件必须通过EventEmitter方法把值发射到父组件中,而且子组件发射的是事件,所以父组件接收时候是通过捕获发射事件来得到值。
https://download.csdn.net/download/h273979586/10333970