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