分类

  • 父子组件通信
  • 非父子组件通信

实现

代码如下:

message.service.ts

import { Injectable } from '@angular/core';
import {Subject, Observable} from 'rxjs/'; @Injectable()
export class MessageService { constructor() { }
private subject = new Subject<any>(); sendMessage(something: any) {
this.subject.next(something);
} clearMessage() {
this.subject.next();
} getMessage(): Observable<any> {
return this.subject.asObservable();
}
}

子组件

home.component.ts

import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {MessageService} from '../message.service'; @Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
message: any; constructor(private messageService: MessageService) {
} ngOnInit() {
} sendMessage(): void { // 发送消息
this.message = 'subject';
this.messageService.sendMessage(this.message);
} clearMessage(): void { // 清除消息
this.messageService.clearMessage();
} }

home.component.html

<input type="button" value="Subject" (click)="sendMessage()">
<input type="button" value="clear" (click)="clearMessage()">

父组件

app.component.ts

import {Component, OnInit} from '@angular/core';
import {MessageService} from './message.service';
import {Subscription} from 'rxjs/Subscription'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
message: any;
subscription: Subscription;
constructor(private messageService: MessageService) {
} ngOnInit(): void {
this.subscription = this.messageService.getMessage()
.subscribe(message => { this.message = message; });
} ngOnDestroy() {
this.subscription.unsubscribe();
}
}

app.component.html

<app-home></app-home>
<div>{{message | json}}</div>
  • 非父子

非父子组件见通信可以通过同一个service来实现。需要注意的是一定要在service中定义一个临时变量来供传递。比如我有两个组件来传递一个Book类型的数据,HomeComponent -> BookComponentBook和service定义如下:

import {EventEmitter, Injectable} from '@angular/core';
import {Subject} from 'rxjs/Subject';
export class Book {
name: string;
price: number;
} @Injectable()
export class BookService {
defaultBook: Book = {name: '《额尔古纳河右岸》', price: 20};
bookEventer: EventEmitter<Book> = new EventEmitter();
}

主页组件HomeComponent,它用来提供数据源,定义如下:

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css'],
encapsulation: ViewEncapsulation.None
})
export class HomeComponent implements OnInit, OnDestroy {
book: Book; constructor(private bookService: BookService) {
} ngOnInit() {
this.book = {name: '《万历十五年》', price: 10.0};
} ngOnDestroy() {
this.bookService.bookEventer.emit(this.book);
}
}

书籍组件BookComponent,用来接收数据,定义如下:

import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {Book, BookService} from './book'; @Component({
selector: 'app-book',
templateUrl: './book.component.html',
styleUrls: ['./book.component.css'],
encapsulation: ViewEncapsulation.None
})
export class BookComponent implements OnInit {
protected subscribeBook: Book; constructor(private bookService: BookService) {
bookService.bookEventer.subscribe(book => {
bookService.defaultBook = book;
});
} ngOnInit() {
this.subscribeBook = this.bookService.defaultBook;
}
}

书籍组件模板文件定义如下:

<p>
subscribeBook:{{subscribeBook | json}}
</p>

直接访问书籍模板对应路由的话,显示为:

先访问主页再访问书籍模板对应路由的话,显示为:

参考

RxJS - Subject

Angular 2 组件之间如何通信?

angular2.0+ 模块之间共享service并订阅更新

Angular4学习笔记(十)- 组件间通信的更多相关文章

  1. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  2. RT-Thread学习笔记3-线程间通信 & 定时器

    目录 1. 事件集的使用 1.1 事件集控制块 1.2 事件集操作 2. 邮箱的使用 2.1 邮箱控制块 2.2 邮箱的操作 3. 消息队列 3.1 消息队列控制块 3.2 消息队列的操作 4. 软件 ...

  3. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  4. Blazor入门笔记(6)-组件间通信

    1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...

  5. Angular4学习笔记-目录汇总

    Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  8. python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL

    python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...

  9. vue组件间通信

    组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...

随机推荐

  1. Tcp端口以及端口相关协议详解

    http://www.codeweblog.com/tcp%e5%b8%b8%e7%94%a8%e7%ab%af%e5%8f%a3/

  2. C#6.0特性与vs2015

    C#6.0 中的那些新特性 1. 自动属性的初始化 public string Name { get; set; } = "zhangsan"; 2. 只读属性初始化 public ...

  3. spring-boot 速成(1) helloworld

    一.mac上安装 $ brew tap pivotal/tap $ brew install springboot 安装成功后,可在终端查看命令行 ➜  ~ spring --versionSprin ...

  4. PID控制器(比例-积分-微分控制器)- II

    Table of Contents Practical Process Control Proven Methods and Best Practices for Automatic PID Cont ...

  5. selenium+python自动化78-autoit参数化与批量上传

    前言 前一篇autoit实现文件上传打包成.exe可执行文件后,每次只能传固定的那个图片,我们实际测试时候希望传不同的图片. 这样每次调用的时候,在命令行里面加一个文件路径的参数就行. 一.命令行参数 ...

  6. Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题

    主要用到协程(Coroutines)和游戏对象的生命周期(GameObject Lifecycle)基础知识,巧妙解决了游戏重启的问题. 关于协程,这里有篇文章我觉得写的非常好,理解起来也很容易.推荐 ...

  7. mysql和redis的区别

    一..redis和mysql的区别总结 (1)类型上         从类型上来说,mysql是关系型数据库,redis是缓存数据库 (2)作用上        mysql用于持久化的存储数据到硬盘, ...

  8. 设置response头信息禁止缓存

    java代码中可通过如下代码设置 response.setHeader("Pragma", "No-Cache"); response.setHeader(&q ...

  9. Attempt to present <TestViewController2: 0x7fd7f8d10f30> on <ViewController: 0x7fd7f8c054c0> whose view is not in the window hierarchy!

    当 storyboard里面的 按钮 即连接了 类文件里面的点击方法  又  连接了   storyboard里 另一个  控制器的  modal 就会出现类似Attempt to present & ...

  10. 《Redis入门指南(第2版)》读后感

    今天刚刚将此书看完,现在还能记住一些内容,还有一些感慨感想,正好又想写点什么了就随便记录一下吧!也许灵感明天就消失了呢? 首先觉得作者非常的厉害,年纪轻轻的就写出了这么一本非常不错的书籍! 然后就是对 ...