【angular】组件：@Input() @Output() 输入属性和输出属性以及中间人模式的使用 （一）

组件：

在Angular项目中都是有大大小小的组件组成的，那要怎么样才能做到组件之间的通讯呢，以下有几种方法：

---

1. 输入属性：@Input

什么是输入属性：是有父组件发送数据值到子组件里，利用父组件绑定属性到子组件，然后子组件利用在控制器@Input()装饰器来标识这是一个输入变量属性；

父组件：

<p>请输入要传给子组件的值：</p>
<input type="text" [(ngModel)]="b1">
<!-- 在子组件控制器中设置@imput()装饰器来表示要输入的变量;我们需要了解，这是单向的，改变子组件的值不会影响父组件的值-->
<app-c1 [a]="b1"></app-c1>

父组件控制器：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  b1: number;
  constructor() { }
}

子组件模板：

<div style="border: 1px solid black;margin: 10px 0px 10px 0px">
  <p>
    我是一个子组件
  </p>
  <p>这是一个父组件传过来的值：{{a}} 的数据</p>
</div>

子组件控制器：

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

@Component({
  selector: 'app-c1',
  templateUrl: './c1.component.html',
  styleUrls: ['./c1.component.css']
})
export class C1Component implements OnInit {
  @Input()
  a: number;
  constructor() { }

  ngOnInit() {
  }

}

1. 输出属性：

什么是输出属性：是有子组件向父组件发送数据值，在子组件控制器中使用类型方法：
（EventEmitter）a1: EventEmitter = new EventEmitter();
并且使用 @Output()装饰器来表示 –>

父组件模板：

<h4>输出属性语法：</h4>

<!--在子组件控制器中使用类型方法：
（EventEmitter）a1: EventEmitter<Parin> = new EventEmitter();
并且使用 @Output()装饰器来表示 -->
<!--利用事件绑定来捕获子组件的数据-->
<app-c2 (a1)="c2Fn1($event)"></app-c2>

<p>我在父组件获取子组件发射过来的数据：姓名：{{parin.userName}}
  ，身价：{{parin.maring | number:'2.2-2'}}
</p>

父组件控制器：

import { Component, OnInit } from '@angular/core';
import {Parin} from "../../components/c2/c2.component";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }

  parin: Parin = new Parin('', 0 );
  ngOnInit() {
  }
  c2Fn1(event: Parin) {
    this.parin = event;
  }

}

子组件模板：

<div style="border: 1px solid black;margin: 10px 0px 10px 0px">
  <p>
    我是一个c2子组件
  </p>
  <p>
    我是：{{userName}},身价：{{maring | number:'2.2-2'}}
  </p>
</div>

子组件控制器：

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

@Component({
  selector: 'app-c2',
  templateUrl: './c2.component.html',
  styleUrls: ['./c2.component.css']
})
export class C2Component implements OnInit {
  userName = 'zhangSan';
  maring: number;

  @Output()
  a1: EventEmitter<Parin> = new EventEmitter();
  constructor() {
    setInterval(() => {
      const parin: Parin = new Parin(this.userName, 100 * Math.random());
      this.maring = parin.maring;
      this.a1.emit(parin);
    }, 1000);
  }

  ngOnInit() {
  }

}

export class Parin {
  constructor(
    public userName: string,
    public maring: number
  ) {}
}

1. 中间人模式：

什么是中间人模式：中间人模式是结合了输入和输出属性的利用同一个父级来协同输入输出，当组件不同属一个父级层则可以用另一种方式，服务来进行操作。

父组件模板：

<h4>中间人模式：</h4>
<!--中间人模式是结合了输入和输出属性的利用同一个父级来协同输入输出，当组件不同属一个父级层则可以用另一种方式，服务来进行操作，-->
<app-c3 (buy)="buyHome($event)"></app-c3>
<app-c4 [parin]="parin1"></app-c4>

父组件控制器：

import { Component, OnInit } from '@angular/core';
import {Parin} from "../../components/c2/c2.component";

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor() { }

  parin1: Parin = new Parin('', 0 );
  ngOnInit() {
  }

  buyHome(event: Parin) {
    this.parin1 = event;
  }
}

报价组件模板：

<div style="border: 1px solid black;margin: 10px 0px 10px 0px">
  <p>
    我是一个c3报价子组件
  </p>
  <p>
    我是：{{userName}},身价：{{maring | number:'2.2-2'}}
  </p>
  <input type="button" value="立即买下" (click)="bytoble($event)">
</div>

报价组件控制器：

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

@Component({
  selector: 'app-c3',
  templateUrl: './c3.component.html',
  styleUrls: ['./c3.component.css']
})
export class C3Component implements OnInit {
  userName = 'zhangSan';
  maring: number;

  @Output()
  a1: EventEmitter<Parin> = new EventEmitter();

  @Output()
  buy: EventEmitter<Parin> = new EventEmitter();
  constructor() {
    setInterval(() => {
      const parin: Parin = new Parin(this.userName, 100 * Math.random());
      this.maring = parin.maring;
      this.a1.emit(parin);
    }, 1000);
  }

  ngOnInit() {
  }
  bytoble(event) {
    this.buy.emit(new Parin(this.userName , this.maring));
  }
}

export class Parin {
  constructor(
    public userName: string,
    public maring: number
  ) {}
}

下单组件模板：

<div style="border: 1px solid black;margin: 10px 0px 10px 0px">
  <p>
    我是C4下单子组件
  </p>
  <h6>确定购买：</h6>
  <p>姓名：{{parin.userName}},
  身价：{{parin.maring | number:'2.2-2'}}
  </p>
</div>

下单组件控制器：

import {Component, Input, OnInit} from '@angular/core';
import {Parin} from "../c3/c3.component";

@Component({
  selector: 'app-c4',
  templateUrl: './c4.component.html',
  styleUrls: ['./c4.component.css']
})
export class C4Component implements OnInit {

  @Input()
  parin: Parin ;
  constructor() { }

  ngOnInit() {
  }

}

---

angular、spring cloud 开源实战项目源码：https://gitee.com/xfdm/FCat
QQ群：549141844

代码持续更新…