나를 위한 기록들

Angular2 rxjs 데이터 공유하기 본문

JS/Angular

Angular2 rxjs 데이터 공유하기

lyasee 2017. 9. 4. 01:58

Rxjs를 이용해서 데이터를 공유하는 방법


서비스

// shared-service.ts

import { Observable } from 'rxjs/Observable';
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SharedService {

private emitChangeSource = new Subject<any>();
changeEmitted$ = this.emitChangeSource.asObservable();
emitChange(change: any) {
this.emitChangeSource.next(change);
}
}


데이터 보내기

import { Component} from '@angular/core';

@Component({
templateUrl: 'child.html',
styleUrls: ['child.css']
})
export class ChildComponent {
constructor(
private sharedService: SharedService
) { }

onClick(){
    this.sharedService.emitChange('데이터를 보내');
}
}


데이터 받기

import { Component} from '@angular/core';
// import 서비스

@Component({
templateUrl: 'parent.html',
styleUrls: ['parent.css']
})

export class ParentComponent {

constructor(
private sharedService: SharedService
) { }
// 구독
this.sharedService.changeEmitted$.subscribe(data => {
console.log('data: ', data);
})

}


Comments