[英]Using observable talk to other component in angular2, not receiving coming value
I have this structor 我有这个教练
app/
--pages/
----pages.component.ts
--channel/
----shared/
------assignPlaylist.modal.ts
Inside the pages.component.ts, I have a variable called playlist 在pages.component.ts中,我有一个名为播放列表的变量
export class PagesComponent {
@Input() platform: Platform;
@Output() onPlaylistsChange: EventEmitter<Playlists>;
currentPageName: string;
currentPage: Page;
pages: Array<Page>;
playlists: Playlists;
}
In assignPlaylist.modal.ts, I make an http post method and it returns a new playlists, I need to use that returned playlists to replace the playlists in pages.component.ts 在assignPlaylist.modal.ts中,我创建了一个http post方法,它返回了一个新的播放列表,我需要使用返回的播放列表来替换pages.component.ts中的播放列表。
this.apiService.addPlaylistToPage(playlistId, stDate, etDate, this.apiService.getGlobalRegion(), callback)
.subscribe(
data => {
if (this.apiService.g_platform == 'DESKTOP') {
this.apiService.getPlaylist(this.apiService.getCurrentPage(), 'true' )
.subscribe(
res => { this.pagesService.setCurrentPlaylists(res.playlists);
}
);
} else {
this.apiService.getPlaylist(this.apiService.getCurrentPage(), 'false' )
.subscribe(
res => { this.pagesService.setCurrentPlaylists(res.playlists);
}
);
}
}
);
This is the res, return results 这是res,返回结果
And this is the structor of playlists 这是播放列表的结构
export class Playlists {
headerPlaylists: Array<Playlist>;
bodyPlaylists: Array<Playlist>;
wholePlaylists: Array<Playlist>;
}
----------------Update---------------------- As mentioned in the answer, I did the following changes. ----------------更新----------------------如答案中所述,我进行了以下更改。
@Injectable()
export class PagesService {
private currentPlaylists: Subject<Playlists> = new BehaviorSubject<Playlists>(new Playlists());
getCurrentPlaylists() {
return this.currentPlaylists.asObservable();
}
setCurrentPlaylists(playlists: Playlists) {
console.log('i am here');
this.currentPlaylists.next(playlists);
}
}
And the console shows 'I am here', 控制台显示“我在这里”
I write in my pages.component.ts 我写在pages.component.ts中
constructor(private service: PagesService, private playlistService: PlaylistService) {
this.pages = [];
this.currentPage = new Page();
this.service.setCurrentPage(this.currentPage);
this.playlists = new Playlists();
this.onPlaylistsChange = new EventEmitter<Playlists>();
this.service.getCurrentPlaylists().subscribe((playlists) => {
console.log(playlists, 'new playlists coming');
this.playlists = playlists;
}, error => {
console.log(error);
});
}
However, I did not see the message ' new playlists coming', am I using it wrong? 但是,我没有看到“新播放列表即将到来”消息,我使用错了吗?
New update: I checked the this.playlists, it's observers is 0, why? 新更新:我检查了this.playlists,它的观察者为0,为什么?
Do create a PlaylistService that exposes an observable that PagesComponent can subscribe to. 不要创建一个PlaylistService来公开PagesComponent可以订阅的可观察对象。
import { Injectable} from '@angular/core';
import { Subject,BehaviorSubject } from 'rxjs';
import {Playlists} from 'channel' /** Assumes this is where you have defined your Playlists interface **/
@Injectable()
export class PlaylistService {
private _currentPlaylists$: Subject<Playlists> = new BehaviorSubject<Playlists>(null);
constructor() {}
currentPlaylists() {
return this._currentPlaylists$.asObservable();
}
setCurrentPlaylists(playlists:Playlists){
this._currentPlaylists$.next(playlists);
}
}
Then import this service into your pagescomponent and subscribe to playlists as shown below:- 然后将此服务导入您的pagescomponent并订阅播放列表,如下所示:-
this.playlistService.currentPlaylists().subscribe((playlists) => {
this.playlists = playlists;
},error => {
console.log(error);
});`
Please do bear in mind you will also have to import this service into your assignPlaylistModal and use it like this:- 请记住,您还必须将此服务导入您的assignPlaylistModal,并按以下方式使用它:-
this.apiService.addPlaylistToPage(playlistId, stDate, etDate, this.apiService.getGlobalRegion(), callback)
.subscribe(
data => {
if (this.apiService.g_platform == 'DESKTOP') {
this.apiService.getPlaylist(this.apiService.getCurrentPage(), 'true' )
.subscribe(
res => {
this.playListService.setCurrentPlaylists(res);
}
);
} else {
this.apiService.getPlaylist(this.apiService.getCurrentPage(), 'false' )
.subscribe(
res => {
this.playListService.setCurrentPlaylists(res);
}
);
}
}
);
Do read more about observables to understand why am using BehaviourSubject here. 不要在此处阅读有关可观察对象的更多信息,以了解为什么要使用BehaviourSubject。 http://reactivex.io/documentation/observable.html http://reactivex.io/documentation/observable.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.