Angular2实现组件交互的方法分析

本文实例讲述了Angular2实现组件交互的方法。分享给大家供大家参考，具体如下：

前言

在Angular开发中，我们经常会涉及到组件之间的交互，比如会引用自己部门开发的组件
有时候，我们需要向引用的组件里面绑定一些数据，或者我们需要引用的子组件输出一些数据
这时，我们就需要处理好组件之间的交互

组件交互的关键代码

父组件绑定数据到子组件

子组件

<h3>{{hero.name}} says:</h3>
@Input() hero: Hero;

父组件

<hero-child [hero]="myhero" ></hero-child>
myhero = "Mr.IQ";

这里子组件的@Input表示它需要hero这个实体，之后父组件引入子组件的时候，就得在子组件标签内写入hero，同时在自己的组件内为hero赋值就实现了父组件数据绑定到子组件

父组件监听子组件的事件

子组件

<button (click)="vote(true)" >Agree</button>
@Output() onVoted = new EventEmitter<boolean>();
vote(agreed: boolean) { this.onVoted.emit(agreed);}

父组件

<my-voter (myonVoted)="onVoted($event)"></my-voter>
myonVoted(agreed: boolean) { agreed ? this.agreed++ : this.disagreed++; }

子组件的@Output表示它会用onVoted方法向父组件传递一个boolean值，父组件引入子组件之后，通过把子组件的方法绑定到自己的方法上，就可以达到监听子组件的效果

setter截听输入属性值的变化

子组件

<h3>"{{name}}"</h3>
private _name = '';
@Input()
set name(name: string) { this._name = (name && name.trim()) || '<no name set>'; }
get name(): string { return this._name; }

父组件

<name-child [name]="myname"></name-child>

父组件引用子组件之后，向子组件绑定数据，子组件通过set，get对父组件传过来的数据进行修改显示

父组件与子组件通过本地变量互动

子组件

seconds = 11;
stop() { this.message = `Holding at T-${this.seconds} seconds`;  }

父组件

<button (click)="timer.stop()">Stop</button>
<div class="seconds">{{timer.seconds}}</div>
<countdown-timer #timer></countdown-timer>

子组件定义了变量和方法，父组件引用子组件标签之后，通过在标签建立本地变量来代表子组件，然后通过变量就可以实现访问子组件的变量和方法

小结

组件交互是经常用到的知识，需要熟练掌握
还有其它交互方式，比如生命周期、服务，遇到了可以继续深入研究

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • angular写一个列表的选择全选交互组件的示例

    开发业务后台经常要用到表格里的选择,全选这种交互.而且不同系统不同场景的UI还不一样.比如:表格里就是简简单单的checkbox:图片列表这种,UI设计师会搞点花样,用户选择一下,会在图片上盖一层半透明的勾选提示等等.我们的系统是用angular 1.X版本开发.所以,我采用angular的装饰性指令编写几个指令,把它们配合在一起使用,来封装这样的场景.这与之前我们遇到的组件的开发思路又不太一样.我们先来分析一下需求及扩展点. 需求分析 实现单选: 实现全选: 可以设置允许多选还是单选.如果多选

  • Angular2 组件交互实例详解

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: l 使用输入型绑定,把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 ViewChild l 父组件和子组件通过服

  • Angular 组件之间的交互的示例代码

    在Angular应用开发中,组件可以说是随处可见的.本篇文章将介绍几种常见的组件通讯场景,也就是让两个或多个组件之间交互的方法. 根据数据的传递方向,分为父组件向子组件传递.子组件向父组件传递及通过服务传递三种交互方法. 父组件向子组件传递 子组件通过@Input装饰器定义输入属性,然后父组件在引用子组件的时候通过这些输入属性向子组件传递数据,子组件可通过setter或ngOnChanges()来截听输入属性值的变化. 先定义两个组件,分别为子组件DemoChildComponent和父组件De

  • Angular2实现组件交互的方法分析

    本文实例讲述了Angular2实现组件交互的方法.分享给大家供大家参考,具体如下: 前言 在Angular开发中,我们经常会涉及到组件之间的交互,比如会引用自己部门开发的组件 有时候,我们需要向引用的组件里面绑定一些数据,或者我们需要引用的子组件输出一些数据 这时,我们就需要处理好组件之间的交互 组件交互的关键代码 父组件绑定数据到子组件 子组件 <h3>{{hero.name}} says:</h3> @Input() hero: Hero; 父组件 <hero-child

  • vue.js $refs和$emit 父子组件交互的方法

    本文介绍了vue.js $refs和$emit 父子组件交互的方法,分享给大家,废话不多说直接看代码: <strong>父调子 $refs (把父组件的数据传给子组件) </strong><br><br><template> <div id="app"> <input type="button" name="" id="" @click="

  • layui框架中layer父子页面交互的方法分析

    本文实例讲述了layui框架中layer父子页面交互的方法.分享给大家供大家参考,具体如下: layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 还可点击此处本站下载. 当layer以iframe层的方式弹出新的窗口(子页面),如何在子页面中访问父页面的元素和函数. 1.访问父页面元素值 var parentId=parent.$("#id").val();//访问父页面元素值 2.访问父页面方法 va

  • 微信小程序与后台PHP交互的方法实例分析

    微信小程序与后台PHP交互的方法实例分析

    本文实例讲述了微信小程序与后台PHP交互的方法.分享给大家供大家参考,具体如下: 接下来将讲后台如何与前台进行数据及图片之间的交互,相信这一点是很多人所关注的,因为当时我实在团队中负责后台开发,因此对前端不是特别了解,这里我会贴出前端开发时的部分代码截图,微信小程序的官方api介绍地址是: https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html 微信与后台服务器之间的数据通信是调用wx.request(OBJECT)实现的,官

  • Angular2 父子组件通信方式的示例

    Angular2 父子组件通信方式的示例

    Angular2官方文档对组件交互这块有详细的介绍-->文档--组件之间的交互.按文档介绍,组件间交互的方式一共有4种,包括: 通过输入型绑定把数据从父组件传到子组件(@Input decoration):子组件暴露一个EventEmitter属性(@Output decoration),当事件发生时,利用该属性emits向父组件发射事件. 父组件与子组件通过本地变量互动.(# var) 父组件调用@ViewChild. 父组件和子组件通过服务来通讯. 我在这里只总结.详细介绍3种我在项目中使用

  • React 子组件向父组件传值的方法

    本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件的state变化. /***实现在输入框输入邮箱时,在div中即时显示输入内容***/ <body> <div id="test"></div> </body> //子组件 var Child = React.createClass({ re

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • jQuery循环动画与获取组件尺寸的方法

    jQuery循环动画与获取组件尺寸的方法

    本文实例讲述了jQuery循环动画与获取组件尺寸的方法.分享给大家供大家参考.具体分析如下: 一.前言 1.jQuery中的animate()方法允许您创建自定义的动画. animate() 方法几乎可以操作所有 CSS 属性,不过当使用 animate() 时,必须使用Camel标记法书写所有的属性名,比如,必须使用paddingLeft而不是padding-left,使用marginRight而不是margin-right,等等.同时,色彩动画并不包含在核心 jQuery 库中.如果需要生成

  • 扩展Bootstrap Tooltip插件使其可交互的方法

    扩展Bootstrap Tooltip插件使其可交互的方法

    本文实例讲述了扩展Bootstrap Tooltip插件使其可交互的方法.分享给大家供大家参考,具体如下: 最近在公司某项目开发中遇见一特殊需求,请笔者帮助,因此有了本文的插件.在前端开发中tooltip是一个极其常用的插件,它能更好向使用者展示更多的文档等帮助信息.它们通常都是一些静态文本信息.但同事他们的需求是需要动态交互,在文本信息中存在帮助网页的链接.如果使用常规tooltip,则在用户移出tooltip依赖DOM节点后,tooltip panel则将被隐藏.所以用户没有办法点击到这些交

随机推荐