这几天在学习 angular 的组件间通讯，篇幅挺长的。

一、输入属性

这里以主组件（AppComponent）和子组件（GoodsComponent）为例。

输入属性是一个单向绑定，父组件向子组件传值，可改变子组件里面的值，而子组件自身改变值的时候，父组件则不受影响。

父组件中的控制器代码：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private search: string;


  constructor() {
  }

}

父组件中的模板代码：

<div>
  <input placeholder="请输入搜索关键字" [(ngModel)]="search">
</div>
<app-goods [keyword]="search"></app-goods>

子组件中接收传值的控制器代码：

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

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

  @Input()
  private keyword: string;

  constructor() {
  }

  ngOnInit() {
    /**
     * 在子组件中定时改变 keyword 的值，却不影响父组件
     */
    setInterval(() => {
      this.keyword = 'IBM';
    }, 3000);
  }

}

子组件中的模板代码：

<p>
  goods works!
</p>
<p>
  您搜索商品的关键字是：{{keyword}}
</p>

二、输出属性

继续用上两个组件，现在反过来，由子组件向父组件传值

父组件中的控制器代码：

import {Component} from '@angular/core';
import {GoodsInfo} from "./goods/goods.component";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  private search: string;

  private price: number;

  constructor() {
  }

  searchResultHandler(goodsInfo: GoodsInfo) {
    this.price = goodsInfo.price;
  }
}

父组件中的模板代码：

<div>
  <input placeholder="请输入搜索关键字" [(ngModel)]="search">
</div>
<p>
  您搜索商品的关键字是：{{search}}，它的价格是：{{price | number:'2.2-2'}}
</p>
<app-goods [keyword]="search" (searchResult)="searchResultHandler($event)"></app-goods>

子组件中接收传值的控制器代码：

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

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

  @Input()
  private keyword: string;

  private price: number;

  // 向父组件发射
  @Output()
  searchResult: EventEmitter<GoodsInfo> = new EventEmitter();

  constructor() {
  }

  ngOnInit() {
    setInterval(() => {
      // 随机产生价格
      let goodsInfo: GoodsInfo = new GoodsInfo(this.keyword, 100 * Math.random());
      this.price = goodsInfo.price;
      this.searchResult.emit(goodsInfo);
    }, 3000);
  }

}

export class GoodsInfo {
  constructor(public name: string,
              public price: number) {
  }
}

子组件中的模板代码：

<p>
  goods works!
</p>
<p>
  您搜索商品的关键字是：{{keyword}}，它的价格是：{{price | number:'2.2-2'}}
</p>

另外 Output 这里可以改变输出的接收名，比如：

// 向父组件发射
@Output('lastPrice')
searchResult: EventEmitter<GoodsInfo> = new EventEmitter();

那么父组件的接收端这里就要改成：

<app-user-search [keyword]="search" (lastPrice)="searchResultHandler($event)"></app-user-search>

转载请注明：隨習筆記 » Angular笔记：组件间通讯