一. 基本概念
- 输入属性
@Input
装饰器 :当它通过属性绑定的形式被绑定时,值会“流入”这个属性 - 输出属性
@Output
装饰器:这个属性总是返回 EventEmitter 。 当它通过事件绑定的形式被绑定时,值会“流出”这个属性。 -
输入属性 @Input 通常接收数据值。 输出属性 @Output 暴露事件生产者,如
EventEmitter
对象。 - 参考链接:https://www.cnblogs.com/yw021...
二. 代码实现详解
(1)父组件给子组件传值 @input()
- 父组件 father.component.ts 提供数据
// 1. ------------ 父组件 father.component.ts 提供数据 ------------
import {Component} from "@angular/core";
@Component({
selector: "my-father",
templateUrl: "father.html"
})
export class FatherComponent {
data: Array<Object>;
constructor() {
this.data = [
{ "id": 1,"name": "html" },
{ "id": 2, "name": "css" }]
}
}
// ------------ 父组件 father.html ----------
<my-child [info]="data"></my-child> // 引用子组件, 并使用属性传递数据过去
- 子组件 child.component.ts 获取数据
// ------------ 父组件 father.component.ts 提供数据 ------------
import {Component, Input} from "@angular/core";
@Component({
selector: "my-child",
templateUrl: "child.html"
})
export class ChildComponent {
// 使用@Input获取传递过来的数据
@Input()
info: Array<Object>;
constructor() {
}
}
// ------------------- 子组件 child.html --------------------
<ul>
<li *ngFor="let item of info">
{{item.name}}
</li>
</ul>
(2)子组件向父组件 emit 传值 @Output()
- 子组件 three-link.component.ts emit提供数据
import {Output, EventEmitter} from "@angular/core";
// 1. 定义输出变量
export class ThreeLinkComponent {
province: string;
@Output() provinceOut = new EventEmitter(); // 输出参数
constructor() {
this.province = "陕西";
}
}
// 2. 事件发出,发射变量给父组件
provinceChange() {
this.provinceOut.emit(this.province);
}
- 父组件 接收数据
// 函数接受子函数传递过来的变量, 子函数中emit的时候触发这个函数。
<three-link (provinceOut)="recPro($event)"></three-link> // 父组件模板接收数据
recPro(event) {
this.province = event;
}
三. 综合:通过 输入属性@Input() 以及 输出属性 @Output() 进行组件间传值
// 父组件 html
<li *ngFor="let item of dataSet;let i = index">
<span>{{item.name}}</span> {{i+1}}--{{item.id}}
<app-child [names]="item" (foo)="bar($event)"></app-child> // 父组件传递属性【names】,接收事件(foo)
</li>
// 父组件 ts
dataSet = [
{"id":0,"name":"张三"},
{"id":1,"name":"李四"},
{"id":2,"name":"王五"},
]
bar(event:any){ // 接收子组件发射的事件
console.log(event);
}
// 子组件 html
<input type="button" value="{{names.name}}" (click)="todo($event)"/>
// 子组件 ts
export class ChildComponent implements OnInit {
@Input() names:any = {} //接收父子间传递的值
@Output() foo = new EventEmitter<string>() //子组件发射事件给父组件
this.foo.emit('你好');
}
constructor() { }
ngOnInit() {
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。