angular4 组件间通讯

1.父→子 input

parent.ts

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

@Component({
  selector: 'page-parent',
  templateUrl: 'parent.html',
})
export class ParentPage {
  i: number = 0;
  constructor() {
    setInterval(() => {
      this.i++;
    }, 1000)
  }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parention-title>
  ion-navbar>
ion-header>

<ion-content padding>
  <h2>Parenth2>
  
  <page-child [content]="i">page-child>
ion-content>

child.ts

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

@Component({
  selector: 'page-child',
  templateUrl: 'child.html',
})
export class ChildPage {
  @Input() 
  content:string;
  constructor() {}

child.html

<div>child:{{content}}div>

2.子→父 output

angular提供了EventEmitter类来用于接收和发射数据，这里我们使用EventEmitter的emit方法来向父组件发射数据。

child.ts

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

@Component({
  selector: 'page-child',
  templateUrl: 'child.html',
})

export class ChildPage {
  //定义输出属性,EventEmitter用来将属性发射出去，这里的泛型指定
  //了要发射出去的的数据类型
  @Output() 
  changeNumber: EventEmitter = new EventEmitter();
  Number: number = 0;
  constructor() {
    setInterval(() => {
      this.changeNumber.emit(++this.Number);
    }, 1000)
  }
}

child.html

<div>childdiv>

parent.ts

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

@Component({
  selector: 'page-parent',
  templateUrl: 'parent.html',
})
export class ParentPage {
  i: number = 0;

  numberIChange(event:number){
      this.i = event;
  }
}

parent.html

<ion-header>
  <ion-navbar>
    <ion-title>Parention-title>
  ion-navbar>
ion-header>

<ion-content padding>
  <h2>Parent:{{i}}h2>
   
  <page-child (changeNumber)="numberIChange($event)">page-child>
ion-content>

 3.父、子间双向绑定

使用[()]来进行父组件和子组件的双向数据绑定时，Output属性的名称 = Input属性+Change，如下

child.ts

  @Input()
  private rating:number=0;//当前星级,接收父组件productDetail传来的值

  @Output()
  private ratingChange:EventEmitter = new EventEmitter();//星级变化，将当前的星级输出到父组件

  click(){
    this.ratingChange.emit(this.rating);//发射当前rating值出去，在父组件接收          
　}

parent.ts

 newRating:number = 5;

parent.html

 <app-stars [(rating)]="newRating">app-stars>