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);
  }