Angular组件传值-@input@output


一. 基本概念

  1. 输入属性@Input 装饰器 ：当它通过属性绑定的形式被绑定时，值会“流入”这个属性
  2. 输出属性 @Output 装饰器：这个属性总是返回 EventEmitter 。 当它通过事件绑定的形式被绑定时，值会“流出”这个属性。
  3. 输入属性 @Input 通常接收数据值。 输出属性 @Output 暴露事件生产者，如 EventEmitter 对象。
  4. 参考链接：https://www.cnblogs.com/yw021...

二. 代码实现详解

（1）父组件给子组件传值 @input()

  • 父组件 father.component.ts 提供数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 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 获取数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ------------ 父组件 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提供数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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);
}

  • 父组件 接收数据
1
2
3
4
5
6
// 函数接受子函数传递过来的变量， 子函数中emit的时候触发这个函数。
<three-link (provinceOut)="recPro($event)"></three-link>   // 父组件模板接收数据

recPro(event) {
   this.province = event;
}

三. 综合：通过 输入属性@Input() 以及 输出属性 @Output() 进行组件间传值

1
2
3
4
5
// 父组件 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>
1
2
3
4
5
6
7
8
9
// 父组件 ts
dataSet = [
    {"id":0,"name":"张三"},
    {"id":1,"name":"李四"},
    {"id":2,"name":"王五"},
]
bar(event:any){  // 接收子组件发射的事件
    console.log(event);
}
1
2
// 子组件 html
<input type="button" value="{{names.name}}" (click)="todo($event)"/>
1
2
3
4
5
6
7
8
9
10
// 子组件 ts
export class ChildComponent implements OnInit {
  @Input() names:any = {}     //接收父子间传递的值
  @Output() foo = new EventEmitter<string>()    //子组件发射事件给父组件
    this.foo.emit('你好');
  }
  constructor() { }
  ngOnInit() {
  }
}