Angular4学习笔记(十)- 组件间通信
分类
- 父子组件通信
- 非父子组件通信
实现
父子
- 父子组件通信一般使用
@Input
和@Output
即可实现,参考Angular4学习笔记(六)- Input和Output - 通过Subject
- 父子组件通信一般使用
代码如下:
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
-> BookComponent
,Book
和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学习笔记(十)- 组件间通信的更多相关文章
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- RT-Thread学习笔记3-线程间通信 & 定时器
目录 1. 事件集的使用 1.1 事件集控制块 1.2 事件集操作 2. 邮箱的使用 2.1 邮箱控制块 2.2 邮箱的操作 3. 消息队列 3.1 消息队列控制块 3.2 消息队列的操作 4. 软件 ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Blazor入门笔记(6)-组件间通信
1.环境 VS2019 16.5.1.NET Core SDK 3.1.200Blazor WebAssembly Templates 3.2.0-preview2.20160.5 2.简介 在使用B ...
- Angular4学习笔记-目录汇总
Angular4学习笔记(一)-环境搭建 Angular4学习笔记(二)-在WebStorm中启动项目 Angular4学习笔记(三)- 路由 Angular4学习笔记(四)- 依赖注入 Angula ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL
python3.4学习笔记(十二) python正则表达式的使用,使用pyspider匹配输出带.html结尾的URL实战例子:使用pyspider匹配输出带.html结尾的URL:@config(a ...
- vue组件间通信
组件间通信(父子,兄弟) 相关链接\组件通信http://www.cnblogs.com/xulei1992/p/6121974.html 学习链接Vue.js--60分钟快速入门http://www ...
随机推荐
- Tcp端口以及端口相关协议详解
http://www.codeweblog.com/tcp%e5%b8%b8%e7%94%a8%e7%ab%af%e5%8f%a3/
- C#6.0特性与vs2015
C#6.0 中的那些新特性 1. 自动属性的初始化 public string Name { get; set; } = "zhangsan"; 2. 只读属性初始化 public ...
- spring-boot 速成(1) helloworld
一.mac上安装 $ brew tap pivotal/tap $ brew install springboot 安装成功后,可在终端查看命令行 ➜ ~ spring --versionSprin ...
- PID控制器(比例-积分-微分控制器)- II
Table of Contents Practical Process Control Proven Methods and Best Practices for Automatic PID Cont ...
- selenium+python自动化78-autoit参数化与批量上传
前言 前一篇autoit实现文件上传打包成.exe可执行文件后,每次只能传固定的那个图片,我们实际测试时候希望传不同的图片. 这样每次调用的时候,在命令行里面加一个文件路径的参数就行. 一.命令行参数 ...
- Unity中巧用协程和游戏对象的生命周期处理游戏重启的问题
主要用到协程(Coroutines)和游戏对象的生命周期(GameObject Lifecycle)基础知识,巧妙解决了游戏重启的问题. 关于协程,这里有篇文章我觉得写的非常好,理解起来也很容易.推荐 ...
- mysql和redis的区别
一..redis和mysql的区别总结 (1)类型上 从类型上来说,mysql是关系型数据库,redis是缓存数据库 (2)作用上 mysql用于持久化的存储数据到硬盘, ...
- 设置response头信息禁止缓存
java代码中可通过如下代码设置 response.setHeader("Pragma", "No-Cache"); response.setHeader(&q ...
- Attempt to present <TestViewController2: 0x7fd7f8d10f30> on <ViewController: 0x7fd7f8c054c0> whose view is not in the window hierarchy!
当 storyboard里面的 按钮 即连接了 类文件里面的点击方法 又 连接了 storyboard里 另一个 控制器的 modal 就会出现类似Attempt to present & ...
- 《Redis入门指南(第2版)》读后感
今天刚刚将此书看完,现在还能记住一些内容,还有一些感慨感想,正好又想写点什么了就随便记录一下吧!也许灵感明天就消失了呢? 首先觉得作者非常的厉害,年纪轻轻的就写出了这么一本非常不错的书籍! 然后就是对 ...