谷歌手机网页版入口,网站优化的,工商注册名字查询系统,网站常见攻击angular 的官网给出了父子组件之间数据交互的方法#xff0c;如ViewChild、EventEmitter 但是如果要在同级组件之间进行数据同步#xff0c;似乎并没有给出太多的信息。 有时候我们想#xff0c;在一个组件中修改数据之后#xff0c;马上反映到另外一个组件中#xff0c; …angular 的官网给出了父子组件之间数据交互的方法如ViewChild、EventEmitter 但是如果要在同级组件之间进行数据同步似乎并没有给出太多的信息。 有时候我们想在一个组件中修改数据之后马上反映到另外一个组件中 或者可能需要调用另外一个组件中的方法这时候我们就可以借助于 rxjs 了。 下面源码在 https://github.com/eleven26/angular-observer 1、首先我们定义一个用于在应用内进行数据交互的 service import {Injectable} from angular/core;Injectable()
export class StoreService {public storageObj {};set(key, value) {this.storageObj[key] value;}get(key) {return this.storageObj[key];}remove(key) {delete this.storageObj[key]}
}2、我们在需要监听数据变化的组件中加入以下代码此处是直接写在了 AppComponent 中 import {Component, OnInit} from angular/core;
import {StoreService} from ./store.service;
import {Observable} from rxjs/Observable;Component({selector: app-root,templateUrl: ./app.component.html,styleUrls: [./app.component.css]
})
export class AppComponent implements OnInit{title app works!;constructor(private storeService: StoreService) {}ngOnInit() {let myObserver: Observableany Observable.create((observer) {// payload 用以存放不同组件之间需要交互的数据let payload this.storeService.get(payload);if (payload) {// do somethingif (payload[type] set-title) {this.title payload[title];}this.storeService.remove(payload);}observer.next();});// 保存到公共 service 中以便不同组件之间可以使用同一个观察者对象this.storeService.set(myObserver, myObserver);}
}上面的代码中我们定义了一个可观察对象 myObserver我们在此方法上调用 subscribe 的时候Observable.create 的回调就会被调用 然后我们从 StoreSrevice 中取得需要处理的数据具体数据格式自由规定 我们处理完数据之后把相关数据从 StoreSrevice 中移除 同时我们需要把 myObserver 保存到 StoreService 中以便不同组件获取到的是同一个 observer。 3、定义一个 A 组件用来生产 payload类似于 生产者-消费者 import {Component, OnInit} from angular/core;
import {StoreService} from ./store.service;
import {Observable} from rxjs/Observable;Component({selector: a-component,template: h1A Componenttitle: {{title}}/h1input typetext (keyup)change($event.target.value),styles: []
})
export class AComponent implements OnInit{title a title;public myObserver: Observableany;constructor(private storeService: StoreService) {}ngOnInit() {this.myObserver this.storeService.get(myObserver);}change(new_title) {this.title new_title;this.storeService.set(payload, {type: set-title,title: new_title});this.myObserver.subscribe(() {});}
}我们在该组件输入 title 的时候发现 AppComponent 的 title 也发生了相应的变化。 这样一来我们的效果就实现了。 转载于:https://www.cnblogs.com/eleven24/p/8409152.html
