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中有我以上描述的代码实例,如果有需要可以从里面下载或者运行,希望能对读者有所帮助。

原文地址:https://www.cnblogs.com/shcrk/p/9219072.html

时间: 2024-10-15 13:39:19

angular组件间的信息传递的相关文章

父子组件间的数据传递

vue当中有个单向数据流的概念,也就是:父组件可以向子组件传递/修改参数(通过属性的方式传),但子组件不可以反过来修改父组件传递过来的参数!(因为怕子组件改了父组件引用类型的数据,可能会影响到其他组件).那怎样解决这个问题?可以复制给子组件自己的变量,然后子组件修改自己的变量啊!这是父组件向子组件传递数据: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv=&quo

【重要组件间的数据传递1】如何将BroadcastReceiver中的数据传递给activity

题目描述 使用broadcastreceiver获得android手机的电池电量,并把电量显示到activity中. 技术分析 用接口传.定义一个接口 让 Activity实现这个接口,然后接受者调用接口里面的方法把要传递的参数传进去. 效果 布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com

Angular组件之间通讯

组件之间会有下列3种关系: 1. 父子关系 2. 兄弟关系 3. 没有直接关系 通常采用下列方式处理(某些方式是框架特有)组件间的通讯,如下: 1父子组件之间的交互(@Input/@Output/模板变量/@ViewChild) 2非父子组件(Service/localStorage) 3还可以利用Session等服务器端的解决方法 Angular组件间通讯方法: 1.父子组件之间的通讯 @Input:是属性绑定,父组件向子组件传递数据 @Output:是事件绑定,子组件向父组件传递数据的同时触

vue2.0 组件之间的数据传递

组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog="close" :proinfo="proinfo"></dialog-addpro></div></template><script>import daddpro from '../../daddpro' expo

angular组件设计

1.总体分为两大组件:container component和presentational component 2.container component作为最外层组件 3.presentational component作为container component子组件 4.通过services进行数据的获取,并通过依赖注入进组件中进行使用(什么时候想用,什么时候注入,不依赖组件间的数据传递) 原文地址:https://www.cnblogs.com/zhaoljblog/p/9358712.h

vue组件子与父组件数据之间的传递

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue 子父组件间的数据传递</title> <script src='vue.js'></script></head><body> <script> // 全局组件 // Vue.component(

Angular 8 组件间数据共享

父子组件数据传递 父级向子级传递对象: @Input 例如:一个下拉框的列表数据 options 来自父组件. 子组件代码: import { Component, Input } from '@angular/core'; @Input() options: Array<string>; 在子组件中,可以自由使用 options 对象. 在 js 中通过 this.options 去访问列表数据 在 html 中 直接用 options 去访问 父组件中使用: 子组件一般直接在父组件的 ht

Vue2.0组件间数据传递

Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有的后代 Vue2.0后$dispatch(),$broadcast()被弃用,见https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换 1,父组件向子组件传递场景:Father上一个输入框,根据输入传递到Child组件

Vue组件信息传递和Vue项目开发

一.全局组件 <body> <!-- 两个全局vue实例可以不用注册全局组件,就可以使用 --> <div id="app"> <global-tag></global-tag> </div> <div id="main"> <global-tag></global-tag> </div> </body> <script src=