angular6组件通信
# Angular组件通信 ## 、父组件传递数据到子组件 - `@Input`:属性绑定,父组件向子组件传递数据 ```js
// 父组件
import { Component } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: `
<div>
<child-component [conent]="toChild"></child-component>
</div>
`,
styles: ``
})
export class AppComponent {
toChild: any = 'data from parent';
constructor() {}
}
``` ```js
// 子组件
import {Component, Input} from '@angular/core'; @Component({
selector: 'child-component',
templateUrl: `
<div>
<span>{{conent}}</span>
</div>
`,
styles: ``
}) export class childComponent {
@Input() conent: any;
constructor() {
// 输出: data from parent
console.log(this.conent);
}
}
``` ## 二、子组件传递数据到父组件 - `@Output`:事件绑定,子组件向父组件传递数据的同时触发事件 ```js
// 父组件
import { Component } from '@angular/core'; @Component({
selector: 'app-parent',
templateUrl: `
<div>
<child-component (onSendData)="getChildData($event)"></child-component>
</div>
`,
styles: ``
})
export class AppComponent { getChildData(e: any) {
// 输出:data from child
console.log(e)
}
}
``` ```js
// 子组件
import {Component, EventEmitter, Output} from '@angular/core'; @Component({
selector: 'child-component',
templateUrl: `
<div>
<button (click)="handlerClick()">发送</button>
</div>
`,
styleUrls: []
}) export class childComponent {
@Output() onSendData: EventEmitter<any> = new EventEmitter();
constructor() {} handlerClick(): void {
this.onSendData.emit('data from child');
} }
``` ## 三、订阅 - `Subject`:一种特殊类型的 `Observable`,允许将值多播到多个观察者 `Observer` ```js
// EventBusService
import { Injectable } from '@angular/core';
import { Subject, Observable } from "rxjs"; @Injectable({ providedIn: 'root' })
export class EventBusService {
constructor() { } private message$ = new Subject<CommonMessage>(); sendMessage(message: CommonMessage) {
this.message$.next(message);
} clearMessage() {
this.message$.next();
} getMessage(): Observable<CommonMessage> {
return this.message$.asObservable();
}
} class CommonMessage {
public type: string;
public data: Object;
} ``` ```js
import { Component } from '@angular/core';
import { EventBusService } from '../eventBusService.service'; @Component({
selector: 'app-componentOne',
templateUrl: './componentOne.component.html',
styleUrls: ['./componentOne.component.css']
})
export class ComponentOneComponent implements OnInit { constructor(private eventBus: EventBusService) {} ngOnInit() {} sendMessage(): void { // 发送消息
this.eventBus.sendMessage({
type: '',
data: {}
});
} clearMessage(): void { // 清除消息
this.eventBus.clearMessage();
} }
``` ```js
import { Component, OnInit } from '@angular/core';
import { EventBusService } from '../eventBus.service'; @Component({
selector: 'app-componentTwo',
templateUrl: './componentTwo.component.html',
styleUrls: ['./componentTwo.component.css']
})
export class ComponentTwoComponent implements OnInit {
valueChanges:any;
constructor(private eventBus: EventBusService) { } ngOnInit() {
this.valueChanges = this.eventBus.getMessage().subscribe(res => {
// 输出:{type: '', data: {}}
console.log(res);
})
} ngOnDestroy() {
// 取消订阅
this.valueChanges.unsubscribe();
} } ```
angular6组件通信的更多相关文章
- 关于React的父子组件通信等等
//==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...
- Angular2 组件通信
1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...
- vue.js入门(3)——组件通信
5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...
- Intent进行组件通信的一些体会
Intent进行组件通信的原理 l Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...
- 进程外组件通信之免注册com通信【原创】
最近在搞进程外组件通信的东西,写了个demo,免注册的,一直没调通,其实就是两个问题卡了好几天,也没找到有用的资料,试了好几天终于才解决,现简单记录下来,免得大家跟我走一样的弯路.下面com端程序名称 ...
- vue2.0 组件通信
组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...
- React之组件通信
组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...
- Vue 非父子组件通信
组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...
- vue子父组件通信
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...
随机推荐
- Mac sublime text3 安装插件
一.下载Mac版sublime text3 下载地址:http://www.pc6.com/mac/120663.html(参考) 2.安装后打开 1.在界面的最上端找到tools(英文版),选择第一 ...
- 32| 无实例无真相:基于LoadRunner实现企业级服务器端性能测试的实践(上)
- Salesforce Admin篇(一)Duplicate Management
参考资料:https://help.salesforce.com/articleView?id=managing_duplicates_overview.htm Salesforce 很重要的一个平台 ...
- 使用SSH+SFTP操作终端全解析,告别XShell
1.前言 在Windows系统下操作远程服务器的方式很多,比如XShell+XFTP组合,亦或是PuTTY+WinSCP组合,但在Mac系统下登陆远程服务器,并没有这些工具供我们使用.相比较而言,在M ...
- JsonUtil(基于Jackson的实现)
JsonUtil(基于Jackson的实现) 前言: 其实,我一直想写一个有关Util的系列. 其中有四个原因: Util包作为项目的重要组成,是几乎每个项目不可或缺的一部分.并且Util包的Util ...
- 阿里云体验:安装jdk
在阿里云的linux服务器上默认是没有安装java环境的,需要自己安装.查了许多资料,发现这篇文章简洁易用.http://www.cnblogs.com/cloudwind/archive/2012/ ...
- SQL Server 根据日期分组、 根据时间段分组(每三个小时一组)
所用数据表: 一.根据日期分组 1. 使用convert() 函数方式 --根据年月 ),CreatTime,)日期,COUNT(*) 次数,sum(Money)总数 from Orders ),Cr ...
- 20190101.DDD笔记
建立领域模型步骤 根据提供的信息完善主要业务场景和业务流程: 根据业务流程识别领域事件并按照时序排列: 针对领域事件进行命令识别: 针对领域事件和命令进行聚合和子域的初步识别: 在识别的subdoma ...
- 【动态规划例题-数塔问题】-C++
描述 观察下面的数字金字塔.写一个程序查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以 从当前点走到左下方的点也可以到达右下方的点. 在上面的样例中,从13到8到26到15到24 ...
- Flume框架的学习使用
Flume框架的学习使用 Flume简介 Flume提供一个分布式的,可靠的,对大数据量的日志进行高效收集.聚集.移动的服务. Flume基于流失架构,容错性强,也很灵活简单 Flume,kafka用 ...