javascript - Observable 未接收 angular2 中的下一个值

标签 javascript angular reactive-programming observer-pattern angular2-observables

为了在 Angular2 不同组件之间传递值,我使用注入(inject)不同组件的不同服务。

在我的 PagesService 组件中,我定义了一个行为主体并希望传递一个值。

import { Injectable } from '@angular/core';
import { ApiService } from '../../apiService/api.service';
import { Playlists } from '../shared/playlists.model';
import { Subject, BehaviorSubject } from 'rxjs/Rx';


@Injectable()
export class PagesService {

  private currentPlaylists: Subject<Playlists> = new BehaviorSubject<Playlists>(new Playlists());

  constructor(private service: ApiService) {

  }

  getCurrentPlaylists() {
    return this.currentPlaylists.asObservable();
  }

  setCurrentPlaylists(playlists: Playlists) {
    console.log(playlists, 'i am here');
    this.currentPlaylists.next(playlists);
  }
}

我需要将播放列表传递给名为 PagesComponent 的组件

 import { Component, OnInit, Input, Output, OnChanges, EventEmitter, Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import { PagesService } from './shared/pages.service';
    import { Subject,BehaviorSubject } from 'rxjs/Rx';
@Component({
  selector: 'pages',
  styleUrls: ['app/pages/pages.css'],
  templateUrl: 'app/pages/pages.html',
  providers: [PagesService]
})
            export class PagesComponent {

              playlists: Playlists;

              constructor(private service: PagesService, private playlistService: PlaylistService) {
                this.playlists = new Playlists();
                this.service.getCurrentPlaylists().subscribe((playlists) => {
                  console.log(playlists, 'new playlists coming');
                  this.playlists = playlists;
                }, error => {
                  console.log(error);
                });
              }
        }

这是控制台输出: enter image description here

更新播放列表后,您可以看到我想要传递打印到控制台的实际播放列表,但我没有在页面组件中收到它,

有什么想法吗?

谢谢

最佳答案

哪个组件正在调用setCurrentPlaylists()

最有可能的是,PagesComponent 之外的某个组件正在调用此方法,并且其他组件可能在其元数据中定义了 providers: [PagesService]。这将导致创建两个 PagesService 实例 - 一个由 PagesComponent 提供(并注入(inject)),另一个实例由其他组件提供(并注入(inject))。

关于javascript - Observable 未接收 angular2 中的下一个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38906315/

相关文章:

javascript - 在数组的 javascript 循环中使用对象名称

javascript - 使用不同的键创建对象

java - 如何使用 Reactor 处理来自 API 的大型 JSON 响应?

java - 如何在 spring boot webflux 上从 mono<user> 获取用户名?

java - 在返回响应之前获取 servlet 请求的状态

javascript - Rails + Javascript + 未捕获的类型错误 : Object #<Object> has no method

angular - 我如何将数据从我的父组件传递到 Angular 中的子组件?

javascript - 重用 Angular 和 html 的冗余函数

java - 使用 RxJava (ReactiveX) 运行 Observable 需要多长时间?

javascript - 我想将值传递给使用 odata 的标签