ionic父子组件的传值

目录结构

一、父组件==>子组件传值

       父组件 about.ts：

public parentVal="我是父组件的值";

   父页面 about.html：

 <child [parentVal]="parentVal"></child>

   子组件 child.ts:

      1、引入input模块

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

      2、接收父组件传的参数，参数名需要与父组件页面中中括号设置的名称一样

  @Input () parentVal:any;

 子页面 child.html

  <p>{{parentVal}}</p>

二、子组件向父组件传值

1.  子组件 child.ts 引入 Output  和 EventEmitter

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

2、子组件中 child.ts 实例化  EventEmitter

@Output() fromChild=new EventEmitter();

3、子组件通过 EventEmitter  对象 fromChild实例广播数据

this.fromChild.emit('我是从子组件来的');

4、父组件调用子组件的时候，定义接收事件 , fromChild 就是子组件的 EventEmitter  对象 fromChild

<child (fromChild)="receiveVal($event)"></child>

5、父组件接收到数据会调用自己的receiveVal()方法，这个时候就能拿到子组件的数据

receiveVal(e){
    console.log(e);
  }