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 ...
随机推荐
- Java表达式转型规则
Java表达式转型规则由低到高转换: 1.所有的byte,short,char型的值将被提升为int型: 2.如果有一个操作数是long型,计算结果是long型: 3.如果有一个操作数是float型, ...
- git 删除分支 远程 && 本地
//查看远程分支 git branch -a //删除远程分支 git branch -r -d origin/branch-name git push origin :branch-name// 或 ...
- json字符串转换对象的方法1
为了方便读者了解json的使用,读者直接粘贴下面代码看效果即可: var json1 = {'name':'小李','age':'11','sex':'女'};console.log(json1.na ...
- Guests组里的用户和其它组里的用户相比,在系统权限上有什么不同?
系统的使用者主要分为:(以计算机管理员administrator 和普通用户User最为常用:一般个人电脑的话,不建议设置太多的用户,这样会影响系统的处理速度,增加许多的垃圾文件.) 1.Admini ...
- ASP.NET Core -中间件(Middleware)使用
ASP.NET Core开发,开发并使用中间件(Middleware). 中间件是被组装成一个应用程序管道来处理请求和响应的软件组件. 每个组件选择是否传递给管道中的下一个组件的请求,并能之前和下一组 ...
- PHP内置的预定义常量大全
URL:http://www.php.net/manual/en/reserved.constants.php 预定义常量:核心预定义常量,标准预定义常量----------------------- ...
- MongoDB学习笔记(一)安装配置
文档存储:文档存储一般用类似json的格式存储,存储的内容是文档型的. MongoDB 将数据存储为一个文档,数据结构由键值(key=>value)对组成.MongoDB 文档类似于 JSON ...
- Andorid源码 4.4 TAG
Fetching project platform/frameworks/opt/timezonepickerremote: Counting objects: 11169, doneremote: ...
- Nginx反向代理WebSocket
http { upstream websocket { server 192.168.1.1:8010; } server { listen 8020; location / { proxy_pass ...
- install pymongo,mysql
yum install pymongo yum install MySQL-python