tnblog
首页
视频
资源
登录
不帅~~但是很暖心.....
排名
14
文章
75
粉丝
21
评论
43
申请别的接口数据(网络接口)
是伍尚金哇 : 敲一夜代码,流下两三行泪水,掏空四肢五体,六杯白开水七桶泡面
mui框架-移动端跳转以及传值的简单方法(修改解决方法)
是伍尚金哇 : 测试了 可以直接在 extras: { userid:'10' //自定义扩展...
数据库的varchar和nvarchar的区别
是伍尚金哇 : 没人看 自己看一个 温习一下
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

ionic父子组件的传值方式

6842人阅读 2020/4/13 19:00 总访问:374192 评论:0 收藏:0 手机
分类: ionic

Angular里面组件的灵活使用相当于页面的嵌套 子页面父页面这种 公共部分要很多地方要用,但是没有后端这么牛逼撒 只能子父之间传值

准备:page页和一个child组件

目录结构:

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

父组件about.ts:

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

父页面:about.html:

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

子组件child.ts:

1、引入input模块

import { ComponentInput } from '@angular/core';

2、接收父组件传的参数,参数名需要与父组件页面中中括号设置的的名称一样  也就是属性

@Input () parentVal:any;

子页面child.html

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

二、子组件向父组件传值

1、子组件child.ts引入Output和EventEmiiter,至于是什么自己官方了解

import { ComponentOnInit ,Input,Output,EventEmitterfrom '@angular/core';

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

@Output() fromChild=new EventEmitter();

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

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

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

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

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

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


over  感谢您看完!

评价

运行ionic出错提示unknown错误

我们在运行ionic程序时经常会看到的这个错误信息终端报错信息:浏览器端报错信息:很明确告诉我们unkown错误,我们找到这个...

ionic v3采用的是TypeScript写法,页面间跳转的几种方式以及传值之页面堆栈方式(NavController)

页面堆栈方式(NavController)跳转页面导入NavController和NavParams 导航控制器和参数 并且注入到构造函数,typescript的...

ionic v3采用的是TypeScript写法,页面间跳转的几种方式以及传值之模态化窗口的形式(ModalController)

模态化窗口的形式(ModalController)和上一篇文章页面堆栈方式(NavController)页面堆栈方式是一样的即一个小弹窗形式,m...

[ERROR] ionic-app-scripts has unexpectedly closed (exit code 1). The ionic CLI will exit

运行ionic有时候缺失或者被弃用掉 ionic-app-scripts报错信息:解决方法:安装这玩意npm install @ionic/app-scripts@lates...

运行ionic有时候缺失或者被弃用掉 ionic-app-scripts

运行ionic有时候缺失或者被弃用掉 ionic-app-scripts报错信息:解决方法:安装这玩意npm install @ionic/app-scripts@lates...

ionic3实战使用Echarts图表(柱状图)

在公司有些东西需要投到大屏幕上去显示,也就是电视显示屏(安卓版的),但是我没普通的html代码并不能打包到上去安装使用...

ionic cordova platform add android报错

ionic各种环境以及配置完但是添加平台报错:Using cordova-fetch for anroidFailed to fetch platform anroidProbably this...
夜醒众人漫漫夜,宝船乘风破浪声。