Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一种是用单例模块传递;有两个元数据具有传递数据的功能:inputs和outputs。

一、元数据传递

  1)配置inputs,接收外部传来的参数

  在inputs里配置输入属性,宿主同过这个属性就能把数据传进来。

  示例如下:

@Component({
selector: 'test-component',
template: `{{inputValue}}`,
inputs: ['inputsValue']
})
export class TestComponent {
private inputsValue;//注意,要在组建内声明,才能使用
}

  宿主通过“[输入属性]=输入值”的方式传值,给属性打上中括号代表输入。以上面例子为例,其父组件调用方式如下:

@Component({
selector: 'parent-component',
template: `<test-component [inputsValue]="data"></test-component>`//以“[属性]=值”的方式传递
})
export class ParentComponent {
private data = 'Hello InputValue~!';
}

  当然,如果不配置元数据,我们还可以在组件类中用“@Inputs() inputsValue”声明,效果一样;我们还可以编写“setter”函数对输入的数据进行加工过滤,这里不做细讲。

  2)配置outputs,给父组件传递数据

  outputs是利用自定义事件的机制给父组件传递数据;元数据配置与inputs相似,只是组件类中要给输出属性创建EventEmitter实例。

  示例如下:

@Component({
selector: 'test-component',
template: `<button (click)="clickToSend()">点击按钮,输出数据</button>`,
outputs: '[outputValue]'
})
export class TestComponent {
public outputValue = new EventEmmitter;
private clickToSend() {
this.outputValue.emit('Hello OutputValue~!');//注意,自定义事件必须要借助异步程序执行发布函数;异步程序有事件、前后端数据交互、延时函数。
}
}

  outputs相当于给组件声明了一个自定义事件,父组件绑定该事件就能与输出机制建立联系,输出数据就是事件对象。

  以上面例子为例,父组件示例如下:

@Component({
selector: 'parent-component',
template: `<test-component (outputValue)="getValue($event)"></test-component>`//属性加上小括号代表输出
})
export class ParentComponent {
private getValue(event) {
console.log(event);//Hello OutputValue~!
}
}

  同样,你也可以用@Output来声明,这里不做细讲。

二、单例模块传递

  JavaScript传值策略是:基本类型数据传数据副本,对象类型数据传对象引用。Angular2各模块注入Module中,只要在Module作用域范围,这些模块再通过依赖注入方式注入到别的模块,依赖的模块是单例的。

  我们可以利用对象传引用的特性,达到组件间传递数据的目的。

  比如我想将数据传给子组件,只需在子组件构造器中注入该组件,该组件由于是单例的,那么一方改动另一方能实时访问到。

  示例如下:

//父组件:
@Component({
selector: 'parent-component',
template: `
<p>{{value}}</p>
<child-component></child-component>
`
})
export class ParentComponent {
public value = 'Parent Value...';//注意!这里不能使用private权限,否则外部模块无法访问到这个属性。
} //子组件:
@Component({
selector: 'child-component',
template: `{{_parent.value}}`
})
export class ChildComponent {
constructor(private _parent: ParentComponent) {}//注入父组件的实例,就能访问到父组件非私有属性了。
}

  结果是<p>Parent Value...</p><child-component>Parent Value...</child-component>

  你还可以用指令、管道、服务来传值,只要是单例模块,都能做到;不过为了代码内聚性,建议只使用组件或者服务作为值传递的媒介。

还有别的传值方式吗?

  当然还有,比如绕过Angular2的API,使用JQuery的data函数进行值的获取和传递。不建议这么做,Angular不鼓励开发者直接操作DOM,它内置了一系列指令以及机制来弱化开发者对DOM的直接操作,开发者使用Angular提供的API可以减少很多操作DOM的代码。

Angular2-组件间数据传递的两种方式的更多相关文章

  1. [转]Angular2-组件间数据传递的两种方式

    本文转自:https://www.cnblogs.com/longhx/p/6960288.html Angular2组件间数据传递有多种方式,其中最常用的有两种,一种是配置元数据(或者标签装饰),一 ...

  2. vue 组件间数据传递

    父组件向子组件传值 方法一: 子组件想要使用父组件的数据,需要通过子组件的 props 选项来获得父组件传过来的数据. 1.父组件parent.vue中代码: <template> < ...

  3. 数据存储的两种方式:Cookie 和Web Storage

    数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡,这个购物卡里存放了一些你的个人信息,下次你再来这个连锁超市时, ...

  4. 数据存储的两种方式:Cookie 和Web Storage(转)

    数据存储的两种方式:Cookie 和Web Storage   数据存储的两种方式:Cookie 和Web Storage 1.Cookie Cookie的作用就像你去超市购物时,第一次给你办张购物卡 ...

  5. Redis数据持久化的两种方式RDB和AOF

    由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能,将数据保存到磁 盘上,当redis重启后,可以从磁盘中恢复数据.redis提 ...

  6. 大数据学习day33----spark13-----1.两种方式管理偏移量并将偏移量写入redis 2. MySQL事务的测试 3.利用MySQL事务实现数据统计的ExactlyOnce(sql语句中出现相同key时如何进行累加(此处时出现相同的单词))4 将数据写入kafka

    1.两种方式管理偏移量并将偏移量写入redis (1)第一种:rdd的形式 一般是使用这种直连的方式,但其缺点是没法调用一些更加高级的api,如窗口操作.如果想更加精确的控制偏移量,就使用这种方式 代 ...

  7. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  8. 开始使用 Vuejs 2.0 --- 组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

  9. React和Vue组件间数据传递demo

    一.React (一)父组件向子组件传数据 简单的向下传递参数 /* Parent */ class App extends Component { render() { return ( <d ...

随机推荐

  1. 计算日期差(Python实现)

    class Solution: def Days(self,year,month,day): if (year%4==0 and year%100!=0) or year%400==0: monthl ...

  2. B - Big String

    We will construct an infinitely long string from two short strings: A = "^__^" (four chara ...

  3. 5.Django高级

    管理静态文件 项目中的CSS.图片.js都是静态文件 配置静态文件 在settings 文件中定义静态内容 STATIC_URL = '/static/' STATICFILES_DIRS = [ o ...

  4. WebApi使用JWT认证

    https://www.cnblogs.com/wangyulong/p/8727683.html https://blog.csdn.net/kebi007/article/details/7286 ...

  5. Kali Linux渗透测试实战 1.1 Kali Linux简介

    1.1 Kali Linux简介 如果您之前使用过或者了解BackTrack系列Linux的话,那么我只需要简单的说,Kali是BackTrack的升级换代产品,从Kali开始,BackTrack将成 ...

  6. .NET 证书加密 存储保存 IIS授权

    最近接到一个任务,加密DotNet项目的配置文件.配置文件里需要加密的地方一共有两块,一个是数据库连接字符串,一个是自定义的所有AppSettings. 一开始接到这个任务我是拒绝的,因为压根不知道怎 ...

  7. .NET 中的 GAC

    GAC : ———> 全局程序集缓存 介绍GAC的好文章(怎么:生成SNK,给项目加强名称,加入到GAC,多个版本共存,介绍了不同的工具): http://www.makaidong.com/% ...

  8. 跟着刚哥学习Spring框架--AOP(五)

    AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.OOP引入 ...

  9. Windows Phone开发手记-WinRT下分组拼音的实现

    Windows Phone版本号自升入8.1以来,开发者就多了一个选项,开发基于WinRT架构的WP或者Universal Windows App.然而开发框架转为WinRT后,很多原有的WP8基于S ...

  10. Eclipse \ MyEclipse \Scala IDEA for Eclipse里如何将控制台console输出的过程记录全程保存到指定的文本文件(图文详解)

    不多说,直接上干货! 问题详情 运行Java程序的时候,控制台输出过多,或者同时运行多个Java程序,输出结果一闪而过的时候,可以考虑将将控制台输出,改为输出到文本文件.无须修改Java代码,引入流这 ...