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 ...
随机推荐
- 智能小程序关于Filter过滤器的简单使用
<filter module="swan"> export default { imgurl: (imgUrl) => { var imgurlprefix = ...
- eclipse 工具在工作中实用方法
不断更新记录工作中用到的实用技巧 1.快捷方式管理多个工作空间 参数: -showlocation 设置eclipse顶部显示工作空间位置 -data 文件位置 设置打开的工作空间位置 创建eclip ...
- C#—使用InstallerProjects打包桌面应用程序
前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. 下载打包工具 C#打包桌面应用程序有很多种方法,这里介绍一种使用M ...
- C语言类型转换
int/float to string/array: C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串,下面列举了各函数的方法及其说明. itoa():将整型值转 ...
- POJ 2175:Evacuation Plan(费用流消圈算法)***
http://poj.org/problem?id=2175 题意:有n个楼,m个防空洞,每个楼有一个坐标和一个人数B,每个防空洞有一个坐标和容纳量C,从楼到防空洞需要的时间是其曼哈顿距离+1,现在给 ...
- java打印1000内的质数并用表格输出
<table width='500' border='1'><% int c=1; for(int i=2;i<=1000;i++){ int n=0; for(int j=2 ...
- 学Redis这篇就够了
Redis 简介 Redis 优势 Redis 数据类型 string hash list set Zset 小总结 基本命令 发布订阅 简介 实例 发布订阅常用命令 事务 实例 Redis 事务命令 ...
- 嵊州D1T3 睡美人航班
嵊州D1T3 睡美人航班 不知不觉中,我对她的爱意已经达到了 n. 是这样子的,第 1 分钟,我对她的爱意值是 (1, 1). 假如当第 x 分钟时我对她的爱意值是 (a, b),那么第 x + 1 ...
- Jmeter接口测试实例-牛刀小试
本次测试的是基于HTTP协议的接口,主要是通过Jmeter来完成接口测试,借此熟悉Jmeter的基本操作. 本次实战,我是从网上找的接口测试项目,该项目提供了详细的接口文档,我们可以通过学习接口文档来 ...
- 对scanner.close方法的误解以及无法补救的错误
scanner错误关闭导致的异常 public class test2 { public static void main(String[] args) { Scanner scanner1 = ne ...