美文网首页
angular组件间的信息传递

angular组件间的信息传递

作者: 前端路上的小兵 | 来源:发表于2018-06-23 22:10 被阅读0次
大纲

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组件间的信息传递

    大纲 1、父组件向子组件传递信息:通过属性2、子组件向父组件传递信息:通过事件3、父组件获取子组件的信息:通过调用...

  • 组件通讯

    2017年46周学习总结 angular组件间通讯 组件输入输出 当子组件需要向父组件传递信息时需要用到输出属性,...

  • Angular2+ 如何向不关联组件传入数据

    关键词 Angular2+ 前言 众所周知,Angular2+向子组件传递数据用@Input(), 子组件向父组件...

  • Angular事件-不同组件间传递数据

    利用Angular Event在不同组件之间传递数据 为了实现在Angular不同Component之间相互传递数...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • angular2 组件之间传值及事件传递

    简介 angular2及以后的版本(包括angular4)都称为angular。组件之间的传值主要分为父子组件间传...

  • Angular2组件间交互

    组件间交互简单来说就是让两个或多个组件之间共享信息。接下来我们就对Angular2组件间的交互做一个简单的解...

  • 组件的通讯

    父子间访问子组件之间的信息(父传子) 子组件访问父组件之间的信息(子传父) 兄弟之间的传递(子传子) 父传子 子传...

  • Angular 用service 在组件间传递数据

    0,把service中的数据传给组件: 1, 创建Service.ts file --所有需要维护的数据 --一个...

  • react组件间通信

    React 开发模式是组件化开发, 所以组件间的信息传递就尤为重要,React传递数据的方式主要有3种。 prop...

网友评论

      本文标题:angular组件间的信息传递

      本文链接:https://www.haomeiwen.com/subject/dhsdyftx.html