angular组件间的信息传递
原文
https://www.jianshu.com/p/82207f2249c1
大纲
1、父组件向子组件传递信息:通过属性
2、子组件向父组件传递信息:通过事件
3、父组件获取子组件的信息:通过调用模板引用变量
4、父组件和子组件共享信息:通过服务共享信息
5、父组件获取子组件的信息:通过@ViewChild 或@ContentChild
6、参考代码
父组件向子组件传递信息:通过属性
//父组件向子组件通过属性传递信息
<app-childen [data]="parent_data"></app-childen>
//子组件通过@Input接受信息
@Input() data: string;
子组件向父组件传递信息:通过事件
//子组件传递信息给父组件
@Output() event = new EventEmitter();
private name: string;
upward() {
/**
* 实例化EventEmitter,赋值给event,event被@Output装饰器定义为输出属性,
* 这样event具备了向上级传递数据的能力,通过调用EventEmitter类中定义的emit方法,
* 来向上传递数据
*/
this.event.emit(this.name);
} //父组件通过事件接收子组件外传的信息
<app-childen2 (event)="getData($event)"></app-childen2> getData(event: any) {
this.parent_name = event;
}
父组件获取子组件的信息:通过调用模板引用变量
通过@Input和@Output可以实现数据之间的传递,但是无法获取子组件的类属性和类方法,接下来我们通过局部变量方式实现获取子组件其他成员。
通过#号来标识一个变量, 这样在父组件模板中创建了一个局部变量#chiden来获取子组件的实例,调用子组件中的方法和属性。
//在子组件中加上模板引用变量,方便父组件调用属性方法
<app-childen3 #chiden></app-childen3> //父组件通过子组件的模板引用变量来调用子组件的属性和方法
<input type="button"
value="调用子组件方法" (click)="chiden.fun1()"
>
<input type="button"
value="调用子组件属性" (click)="getChildInfo(chiden.childInfo)"
>
父组件和子组件共享信息:通过服务共享信息
父子组件共享同一个服务,利用该服务实现双向通信
父组件获取子组件的信息:通过@ViewChild 或@ContentChild
@ViewChild的作用是声明对子组件元素的实例引用,意思是通过注入的方式将子组件注入到@ViewChild容器中,你可以想象成依赖注入的方式注入,只不过@ViewChild不能在构造器constructor中注入,因为@ViewChild会在ngAfterViewInit()回调函数之前执行。
import {Component, ViewChild} from '@angular/core';
import {ChildenComponent} from './child.component'; @Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export class ParentComponent {
@ViewChild(ChildenComponent) child: ChildenComponent; OnClick() {
this.child.fun1();
}
}
参考代码
angular实例代码中的angular-transfer-info中有我以上描述的代码实例,如果有需要可以从里面下载或者运行,希望能对读者有所帮助。
angular组件间的信息传递的更多相关文章
- angular组件间的通信(父子、不同组件的数据、方法的传递和调用)
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- 使用postMesssage()实现跨域iframe页面间的信息传递----转载
由于web同源策略的限制,当页面使用跨域iframe链接时,主页面与子页面是无法交互的,这对页面间的信息传递造成了不小的麻烦,经过一系列的尝试,最后我发现有以下方法可以实现: 1. 子页面url传参 ...
- vue-cli中父子组件间的变量传递
vue-cli中父子组件间的变量传递 在vue中每一个组件的作用域都是独立的,如果我们想实现父子组件间变量的传递就要另寻他法,而不能直接调用其中的变量. 父级组件向子级组件传递变量 要实现这种效果我们 ...
- vue组件间的数据传递
父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...
- react - 组件间的值传递
父组件向子组件传值 父组件通过属性进行传递,子组件通过props获取 //父组件 class CommentList extends Component{ render(){ return( < ...
- Angular组件间的数据传输
解法一 概括和流程 定义了两个组件,data-transfer-two和data-transfer-two-child,由data-transfer-two引用data-transfer-two-ch ...
- Vue学习笔记(三)组件间如何通信传递参数
一:父组件向子组件传递参数 <template > <div id="app"> <h1 v-text="title">&l ...
- Angular : 响应式编程, 组件间通信, 表单
Angular 响应式编程相关 ------------------------------------------------------------------------------------ ...
- 解决SpannableString在Android组件间传递时显示失效的问题
问题:在A activity中传递一个SpannableString到B activity中,并最终传递到B activity中的TextView中,但是没有展示出Span效果. 解决:阅读TextV ...
随机推荐
- PHP截取字符串长度
<?php function str_cut($string, $start=0,$length, $dot = '..') { $strlen = strlen($string); ...
- 小米开源文件管理器MiCodeFileExplorer-源码研究(1)-2个模型Model
上篇说到,把小米的Java代码整理成了5个包,其中1个是net.micode.fileexplorer.model.这个包就2个模型类,最基本了,FileInfo和FavoriteItem. pack ...
- 【Codeforces Round #456 (Div. 2) C】Perun, Ult!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] set1 < pair < int,int > > set1;记录关键点->某个人怪物永远打不死了,第 ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...
- Java学习笔记五 常用API对象一
常用API:字符串操作:String类,StringBuffer类,StringBulider类 字符串是最重要的数据类型之一,处理字符串也是一种语言的基本工作. 1.String类: public ...
- centos7 Another app is currently holding the yum lock; waiting for it to exit...
解决方法:rm -rf /var/run/yum.pid 来强行解除锁定,然后你的yum就可以运行了
- 动态链接库DLL的创建生成及调用
一.背景 最近在做CANTOUSB底层驱动的调用,是调用别人已经封装好的库,看不到别人写的源程序.程序中调用的是隐式调用即 x.h+x.lib+x.dll,其中DLL即是动态链接库(Dynamic L ...
- Moodle 中文 API 之 文件管理API
File API 文件管理 文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...
- 1.2 Use Cases中 Website Activity Tracking官网剖析(博主推荐)
不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Website Activity Tracking 网站活动追踪 The origi ...
- Spark SQL概念学习系列之DataFrame与RDD的区别
不多说,直接上干货! DataFrame的推出,让Spark具备了处理大规模结构化数据的能力,不仅比原有的RDD转化方式更加简单易用,而且获得了更高的计算性能.Spark能够轻松实现从MySQL到Da ...