对angular2中的其他组件使用可观察的通话，而不接收到即将来的值

问题描述

我有这个讲师

app/
  --pages/
  ----pages.component.ts 
  --channel/
  ----shared/
  ------assignPlaylist.modal.ts

在pages.component.ts中，我有一个名为播放列表的变量

Inside the pages.component.ts, I have a variable called playlist

export class PagesComponent {

  @Input() platform: Platform;

  @Output() onPlaylistsChange: EventEmitter<Playlists>;

  currentPageName: string;

  currentPage: Page;

  pages: Array<Page>;

  playlists: Playlists;
}

在assignPlaylist.modal.ts中，我创建了一个http post方法，它返回了一个新的播放列表，我需要使用返回的播放列表来替换pages.component.ts中的播放列表.

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

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);
                }
              );
            }
            }
          );

这是资源，返回结果

这是播放列表的构造函数

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',

我写在我的pages.component.ts

I write in my 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?

新更新:我检查了this.playlists，它的观察者为0，为什么?

推荐答案

请创建一个PlaylistService，以公开可观察到的PagesComponent可以订阅的内容.

Do create a PlaylistService that exposes an observable that PagesComponent can subscribe to.

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);
    }
}

然后将该服务导入您的pages组件并订阅播放列表，如下所示:-

Then import this service into your pagescomponent and subscribe to playlists as shown below:-

this.playlistService.currentPlaylists().subscribe((playlists) => {
      this.playlists = playlists;
},error => {
    console.log(error);
});`

请记住，您还必须将此服务导入您的assignPlaylistModal，并按以下方式使用它:-

Please do bear in mind you will also have to import this service into your assignPlaylistModal and use it like this:-

   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);
            }
          );
        }
        }
      ); 

请在此处阅读有关可观察对象的更多信息，以了解为什么要使用BehaviourSubject. http://reactivex.io/documentation/observable.html

Do read more about observables to understand why am using BehaviourSubject here. http://reactivex.io/documentation/observable.html

这篇关于对angular2中的其他组件使用可观察的通话，而不接收到即将来的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！