ionic 父子组件传值

ionic 父子组件传值

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

父组件ts

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

父组件html

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

子组件ts

import { Component, Input } from '@angular/core';
@Input () parentVal:any;

子组件html

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

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

子组件ts

import { Component, OnInit ,Input,Output,EventEmitter} from '@angular/core';
@Output() fromChild=new EventEmitter();

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

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

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

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

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

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