Angular - @Input 与 @Output 进行父子模板传值

1.1 @Input

一个装饰器，用来把某个类字段标记为输入属性，并提供配置元数据。 该输入属性会绑定到模板中的某个 DOM 属性。当变更检测时，Angular 会自动使用这个 DOM 属性的值来更新此数据属性。

1.2 @Output

一个装饰器，用于把一个类字段标记为输出属性，并提供配置元数据。 凡是绑定到输出属性上的 DOM 属性，Angular 在变更检测期间都会自动进行更新。

1.3 实际代码

1.3.1 SonComponent 与 html

　　该模板使用@Input 装饰的 item 接收父模板传过来的数值，使用 @Output 模板装饰 update 向父模弹出事件。

import {Component, EventEmitter, Input, Output} from '@angular/core';

/**
 * @author pancc
 * @version 1.0
 */
@Component({
  selector: 'app-son',
  templateUrl: './son.component.html',
  styleUrls: ['./son.component.css']
})
export class SonComponent  {

  @Input()
  item: string;

  @Output()
  update: EventEmitter<string> = new EventEmitter<string>();

  constructor() {
  }
  emitString() {
     this.update.emit(this.item);
  }
}

　　该页面定义了一个方法，当对 p 标签内的 son Works! 点击后发生一个 emitter 冒泡事件（在这里将父模板传进来的 string 值向上弹），该事件由父模板接收。

<div id="son" style="  border-radius: 14px ;
  border: #deff86 2px solid;
  margin-right: 12px;
  padding: 1px;">
  <p (click)="emitString()" style="background-color: #deff86">son works! </p>
  <p style="text-align: center;background-color: aqua;" class="item">{{item}}</p>
</div>

1.3.2 FatherComponent 与 html

　　该模板在初始化的时候产生 4 个随机的字母，并且放入 items 中

import {Component, OnInit} from '@angular/core';
import * as Chance from 'chance/chance.js';

/**
 * @author pancc
 * @version 1.0
 */
@Component({
  selector: 'app-father',
  templateUrl: './father.component.html',
  styleUrls: ['./father.component.css']
})
export class FatherComponent implements OnInit {
  message: string;
  items: string[] = [];

  constructor() {
  }

  doUpdate(i: string) {
    this.message = ` father receives ${i}`;
  }

  ngOnInit(): void {
    const size = 4;
    for (let i = 0; i < size; i++) {
      this.items.push(Chance().character());
    }

    console.log(this.items);
  }
}

　　该页面遍历 items ，并将items中的每一个数值传进子模板，并定义了一个方法 doUpdate 接收子模板的 emitter 事件。

<div style="float: left" >
<p style="text-align: center">{{message?message:'father waits for message!'}}</p>
<div *ngFor="let i of items" style="float: left;">
  <app-son [item]="i" (update)="doUpdate(i)"  ></app-son>
</div>
</div>

1.4 测试

 当点击第一个 div 内的 son works! 文字时，message 发生改变：

 当点击第二个 div 内的 son works! 文字时，message 同样发生改变：