中间人模式

设计一个购买按钮，获取所需要购买物品的信息，在报价组件中

@Output()
buy:EventEmitter<PriceQuote> = new EventEmitter();


buyStock(event){
  this.buy.emit(new PriceQuote(this.stockCode,this.price));
}

<div>报价组件</div>
<div>

  <input type="button" value="购买" (click)="buyStock($event)">
</div>

下单组件

<div>下单组件</div>
<div>买100手{{priceQuote.stockCode}}股票
  价格{{priceQuote.lastPrice | number:'2.2-2'}}
</div>

@Input()
stockCode:string;
priceQuote:PriceQuote;

主组件中

  buyHandle(event:PriceQuote){
  this.priceQuote = event;
}

<app-price-quote (buy)="buyHandle($event)"></app-price-quote>
<app-order [priceQuote]="priceQuote"></app-order>

报价组件和订单组件在彼此不知道对方存在的时候，共同完成一个下单的功能，也就是两个平行的有共同的父组件的组件之间的通讯，这就是中间人模式，在两个没有共同父组件的组件之间，这时应该使用一个可注入的服务作为中间人，无论何时，组件被创建这个中间人服务被注入，组件可以订阅这个服务发射的事件流

组件生命周期

组件的生命周期钩子，组件初始化

ngOnChanges
ngDoCheck
ngAfterContentChecked
ngAfterViewChecked

（只调用一次）

constructor
ngOnInit
ngAfterContentInit
ngAfterViewInit

变化检测（变更检测方法就是初始化中会重复执行的方法）

ngOnChanges
ngDoCheck
ngAfterContentChecked
ngAfterViewChecked

3.组件销毁（只调用一次）

ngOnDestroy

每一个生命周期钩子都是@angular/core中的接口
生成一个计数器，用来显示每一行日志的编号

let logIndex:number = 1;

声明一个方法接收msg，将log编号和msg打印出来

logIt(msg:string) {
        console.log('#${{logIndex++}} ${msg}');
    }

简要调用所有生命周期钩子

import {
  AfterContentChecked,
  AfterContentInit, AfterViewChecked,
  AfterViewInit,
  Component,
  DoCheck,
  Input,
  OnChanges,
  OnDestroy,
  OnInit,
  SimpleChanges
} from '@angular/core';

let logIndex: number = 1;



@Component({
  selector: 'app-life',
  templateUrl: './life.component.html',
  styleUrls: ['./life.component.css']
})

export class LifeComponent implements
  OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {


  @Input ()
  name: string ;
  logIt(msg: string) {
    console.log('#${{logIndex++}} ${msg}');
  }

  constructor() {
    this.logIt('name在constructor中的值是：' + name);
  }

  ngOnInit() {
    this.logIt('ngOnInit');

  }
  ngOnChanges(changes: SimpleChanges): void {
    let name = changes['name'].currentValue;
    this.logIt('ngOnChanges：' + name);
  }
  ngAfterContentChecked(): void {
    this.logIt('ngAfterContentChecked');

  }

  ngAfterContentInit(): void {
    this.logIt('ngAfterContentInit');

  }

  ngAfterViewChecked(): void {
    this.logIt('ngAfterViewChecked');
  }

  ngAfterViewInit(): void {
    this.logIt('ngAfterViewInit');
  }

  ngDoCheck(): void {
    this.logIt('ngDoCheck');
  }



  ngOnDestroy(): void {
    this.logIt('ngOnDestroy');
  }

}