ng2父子模块数据交互
一、父模块向子模块传值
//父html
<my-child [childdata]="parentdata"></my-child>
其中,my-child为子模块的selector标签,childdata为子模块声明的变量(用来保存父模块传递过来的值),parentdata为父模块声明的变量(保存着父模块的值)
子模块中引用父模块传过来的值:
//child.component.ts
import { Component, OnInit,Input } from '@angular/core'; @component({
selector:'my-child',
...
})
export class ChildComponent implements OnInit{
@Input() childdata:any;
//Do some action with childdata
}
二、子模块向父模块传递事件
子模块传出事件:
//child.component.ts
import { Component, OnInit,Output } from '@angular/core'; @component({
selector:'my-child',
...
})
export class ChildComponent implements OnInit{
@OUtput() childevent=new EventEmitter();
//Do some action
}
父html引用事件:
<my-child (childevent)="parentevent($event)"></my-child>
其中childevent为子模块事件,parentevent为父模块事件
ng2父子模块数据交互的更多相关文章
- 分布式环境中,模块数据交互协议分析 (百度brpc)
1. 背景 之前听到同事说,要为自己的模块考虑写个数据协议.今天有空想了一下.写出来,方便后续使用. 开源代码brpc中可以支持多种协议,nshead.redis.mongo等20多种协议. 2. 什 ...
- ng2父子模块通信@ViewChild和@Inject
一.@ViewChild 父组件中使用@ViewChild拿到子组件的变量和方法(父组件可调用子组件的方法和变量) parent.component.ts: import { Component, O ...
- vue20 父子组件数据交互
子组件使用父组件数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- vuejs组件交互 - 01 - 父子组件之间的数据交互
父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...
- angularJS中directive父子组件的数据交互
angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...
- 【python】-- 多进程的基本语法 、进程间数据交互与共享、进程锁和进程池的使用
多进程 进程之间是相互独立的,python是启动进程的时候,是启动的是原生进程.进程是没有GIL锁的,而且不存在锁的概念,进程之间的数据式不能共享的,而线程是可以的. 1.进程的定义 用mulipro ...
- AngularJs $resource 高大上的数据交互
$resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 需要注入 ngResource 模块.angular-resource[.min].js ...
- angularJs中自定义directive的数据交互
首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...
随机推荐
- iOS对象(字典或数组)转化为JSon字符串
NSMutableDictionary *dictionary = [[NSMutableDictionary alloc] init]; [dictionary setValue:@"he ...
- 【BZOJ2083】[Poi2010]Intelligence test 二分
[BZOJ2083][Poi2010]Intelligence test Description 霸中智力测试机构的一项工作就是按照一定的规则删除一个序列的数字,得到一个确定的数列.Lyx很渴望成为霸 ...
- 高复用率的RTSPClient组件EasyRTSPClient设计流程概述
EasyRTSPClient 设计过程 概述 EasyRTSPClient 基于live555构建而成. 今天讲讲EasyRTSPClient的设计过程 EasyRTSPClient,主要包括以下部分 ...
- django框架小技巧
带命名空间的URL名字 多应用中路由定义,采用命名空间,防止冲突 url(r'^polls/', include('polls.urls', namespace="polls")) ...
- Spring Boot启动原理解析
Spring Boot启动原理解析http://www.cnblogs.com/moonandstar08/p/6550758.html 前言 前面几章我们见识了SpringBoot为我们做的自动配置 ...
- 【题解】数字组合(NTT+组合 滑稽)
[题解]数字组合(NTT+组合 滑稽) 今天实践一下谢总讲的宰牛刀233,滑稽. \((1+x)(1+x)(1+x)\)的\(x^2\)系数就代表了有三个一快钱硬币构成的两块钱的方案数量. 很好理解, ...
- Django框架ORM单表删除表记录_模型层
此方法依赖的表是之前创建的过的一张表 参考链接:https://www.cnblogs.com/apollo1616/p/9840354.html 1.删除方法就是delete(),它运行时立即删除对 ...
- ABAP HTTP POST
1.HTTP DATA: lo_http_client TYPE REF TO if_http_client, lv_service TYPE string, lv_result TYPE strin ...
- linux 防火墙配置与REJECT导致没有生效问题
1.进入到/etc/sysconfig 如图 2.使用vi命令对iptables进行编辑."vi iptables",然后显示如图 # Firewall configuration ...
- 《程序员代码面试指南》第八章 数组和矩阵问题 在数组中找到出现次数大于N/K 的数
题目 在数组中找到出现次数大于N/K 的数 java代码 package com.lizhouwei.chapter8; import java.util.ArrayList; import java ...