组件之间的通信（@Input、@Output）

1.父传子 （@input）

parent.ts:

export class ParentPage {

 menu:'菜单';

  }
parent.html:

 

child.ts:

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

export class ChildPage{

@Input() childMenu:string;

}

child.html:

{{childMenu}}

  2.子传父 （@Output）

child.ts:

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

export class ChildPage {

  @Output() changeNumber: EventEmitter =new EventEmitter();

  Number: number =0;

  constructor() {

    this.changeNumber.emit(this.Number+10)

  }

}

parent.html:

{{num}}

parent.ts:

export class ParentPage {

  num: number =0;

  newNumber(num:number){

      this.num= num;

  }

}