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 ...
随机推荐
- Storm 学习之路(四)—— Storm集群环境搭建
一.集群规划 这里搭建一个3节点的Storm集群:三台主机上均部署Supervisor和LogViewer服务.同时为了保证高可用,除了在hadoop001上部署主Nimbus服务外,还在hadoop ...
- 【静态NAT】 为什么子网可以ping父网,但是父网ping不通子网?
为什么子网可以ping父网,但是父网ping不通子网? 这就好比在公网中ping一个192.168.0.x的子网,roter无法找到这个子网的地址,所以会把package丢掉. 如何解决呢,可以在路由 ...
- Docker安装nacos1.0.0固定ip单机模式
1 从dockerHub拉取镜像到本地 docker pull nacos/nacos-server:1.0.0 2 创建目录(宿主机) 2.1 日志目录 mkdir -p /docker/nacos ...
- Appium+python自动化(十三)- 与Capability完美懈垢之解读(超详解)
简介 Capability又叫Appium Desired Capabilities,前边写了那么多实例代码,小伙伴可以发现一些规律,就是有一部分代码总是重复的出现在你的视线中.这部分就是对Capab ...
- CentOS下查看机器配置
1.查看系统位数.内核版本 [root@localhost ~]# uname -a Linux localhost.localdomain 3.10.0-693.11.6.el7.x86_64 #1 ...
- Linux服务器使用Docker部署.net Core项目
发布ASP.NET Core项目 和普通的项目发布一样,将项目发布到目标文件夹中 构建Dockerfile文件 在目标文件根目录新建Dockerfile文件(没有后缀) FROM microsoft/ ...
- RQNOJ193 造路行动
题目转移 详见最小生成树讲解 Kruskal #include<cstdio> #include<algorithm> using namespace std; ; int n ...
- Vue技术点整理-Vue CLI
Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...
- STL库的应用
容器分为两类:序列式容器和关联式容器. 序列式容器,其中的元素不一定有序,但都可以被排序.如:vector.list.deque.stack.queue.heap.priority_queue.sli ...
- Docker笔记(一):什么是Docker
原文地址: http://blog.jboost.cn/2019/07/13/docker-1.html 1. 前言 接触Docker也有两年多了,断断续续玩过一些应用场景,如安装一些常用工具服务, ...