6.1组件间通讯

输入属性（父组件 → 子组件）

使用@Input注解可以声明一个输入属性。声明输入属性可以理解为自定义属性

@Input()
stockCode:string;

实战

假设存在两组件，分别为父组件app和子组件app-order，在父组件app的模板中使用了子组件app-order，若父组件希望读取input中的输入值，将其传递给子组件并显示，应如何编码？

1. 定义一个具有stockCode输入属性的order子组件，

2. 在app组件中使用order组件，

3. 并将app组件中一个input标签的值传给stockCode输入属性。

子组件

order组件模板代码：

<p>order子组件：{{stockCode}}</p>

order组件控制器代码：

@Input()
stockCode: string;

父组件

app组件模板代码：

<input (input)="onInput($event)">
<app-order [stockCode]="stock"></app-order>

app组件控制器代码：

stock: string;

constructor() {
}

onInput(event: any) {
    this.stock = event.target.value;
}

处理通过输入属性传递数据，还可以通过路由参数传递数据 使用路由参数传递数据需要注入：routeInfo: ActivatedRoute

输出属性（子组件 → 父组件）

声明一个输出属性可以理解为自定义事件。

• 定义输出属性

  @Output('priceChange')
  priceChange: EventEmitter<number> = new EventEmitter();
  @Output('自定义事件名称')
  自定义事件名: EventEmitter<自定义事件的返回类型> = new EventEmitter();

  当@Output()括号内为空时，默认“自定义事件名称”为“自定义事件名”

• 发射自定义事件

  this.priceChange.emit(num);
  this.自定义事件名.emit(发射实际值);

• 父组件中使用自定义事件接受返回值

  <app-price-quote (priceChange)="onPriceChange($event)"></app-price-quote>
  <app-price-quote (priceChange)="事件处理函数(自定义事件返回值)"></app-price-quote>

  实战：新建一个具有priceChange输出属性的price-quote组件。priceChange事件中包含实时变化的数字。app组件需要获取到这个数字并显示

  price-quote组件控制器代码

  @Output('priceChange')
  priceChange: EventEmitter<number> = new EventEmitter();

  constructor() {
    setInterval(() => {
      const num: number = Math.random();
      this.priceChange.emit(num);
    }, 1000);
  }

app组件模板代码

<app-price-quote (priceChange)="onPriceChange($event)"></app-price-quote>
<p>app组件:{{price}}</p>

app组件控制器代码

  price: string;

  constructor() {}

  onPriceChange(price: number) {
    this.price = price.toString();
  }

中间人模式

编写组件时要考虑可重用性，要解耦。故先考虑好那些组件要重用，需要那些中间人，然后再写代码。

Json.stringfy