对应@input输入传值,也有@Output输出传值。
输入传值请我之前写的一篇文章:https://www.jianshu.com/p/686294cb2b29
例如:
A是B的父组件,B中有Input参数how,A中调用B组件,并传入[Import]参数。B根据传入的Import参数,发射返回相应的数据。
//A页面代码
<table class="table table-bordered">
<tbody>
<tr>
......
</tr>
<tr *ngFor="let item of tasks|filter:'title':keyword;let i=index">
......
<td>
<app-jinji [Import]="item.jinji" (Export)="print($event)"></app-jinji>
</td>
......
</tr>
</tbody>
</table>
//A中ts代码,定义print方法
......
print(data) {
console.log(data);
}
......
//B中ts代码
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
@Component({
selector: 'app-jinji',
templateUrl: './jinji.component.html',
styleUrls: ['./jinji.component.css']
})
export class JinjiComponent implements OnInit {
private shenheren: string;
@Input('Import')
private how: Number;
@Output('Export')
EmitData: EventEmitter<string> = new EventEmitter();
constructor() {
}
ngOnInit() {
// console.log('how:' + this.how);
switch (this.how) {
case 1:
this.shenheren = '马云';
// console.log(1);
break;
case 2:
this.shenheren = '李彦宏';
// console.log(2);
break;
case 3:
this.shenheren = '马化腾';
// console.log(3);
break;
case 4:
this.shenheren = '柳传志';
// console.log(4);
break;
default:
this.shenheren = '贾跃亭';
// console.log(5);
break;
}
this.EmitData.emit(this.shenheren);
}
}
运行后,页面console窗口中会打印出各位大佬的姓名,如图: