Observable 不接收 angular2 中的下一个值
Observable do not receive the next value in angular2
为了在angular2不同的组件之间传递值,我使用不同的服务注入到不同的组件中。
在我的 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);
});
}
}
这是控制台输出:
更新播放列表后,您可以看到我想要传递的实际播放列表打印到控制台,但我没有在页面组件中收到它,
有什么想法吗?
谢谢
哪个组件正在调用 setCurrentPlaylists()
?
很可能是 PagesComponent 以外的某个组件正在调用此方法,并且该其他组件可能在其元数据中定义了 providers: [PagesService]
。这将导致创建 PagesService
的两个实例——一个由 PagesComponent 提供(并注入),另一个由其他组件提供(并注入)。
为了在angular2不同的组件之间传递值,我使用不同的服务注入到不同的组件中。
在我的 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);
});
}
}
这是控制台输出:
更新播放列表后,您可以看到我想要传递的实际播放列表打印到控制台,但我没有在页面组件中收到它,
有什么想法吗?
谢谢
哪个组件正在调用 setCurrentPlaylists()
?
很可能是 PagesComponent 以外的某个组件正在调用此方法,并且该其他组件可能在其元数据中定义了 providers: [PagesService]
。这将导致创建 PagesService
的两个实例——一个由 PagesComponent 提供(并注入),另一个由其他组件提供(并注入)。