我有一个简单的组件progressBar
来显示(或不显示)进度条。
以及一个简单的可观察服务。
这是服务:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class ProgressBarService {
subject = new BehaviorSubject<any>(false);
changes = this.subject
.asObservable()
.do(changes => console.log('new state', changes));
constructor(private http: Http) {
}
show() {
this.subject.next(true);
}
hide() {
this.subject.next(false);
}
}
这里没什么花哨的,只是一个默认设置为 false 的BehaviorSubject,hide/show
用于通过 .next() 更改值
.
该组件如下所示:
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ProgressBarService } from './progressbar.service';
@Component({
selector: 'app-progressbar',
templateUrl: './progressbar.component.html',
styleUrls: ['./progressbar.component.scss'],
providers:[ProgressBarService]
})
export class ProgressbarComponent implements OnInit {
isDisplay : boolean;
constructor(private $progressbar : ProgressBarService) { }
ngOnInit() {
this.$progressbar
.changes
.subscribe((display : boolean) => this.isDisplay = display);
}
showProgress(){
(this.isDisplay)
? this.$progressbar.hide()
: this.$progressbar.show();
}
}
在初始化期间,组件订阅主题以获得默认值并将其设置为isDisplay
。
showProgress
仅用于在我的模板中尝试。
<md-progress-bar mode="indeterminate" color="accent" *ngIf="isDisplay"></md-progress-bar>
<button type="submit" md-raised-button color="primary" (click)="showProgress()">Show/hide progressBar</button>
当该服务在组件内部使用时,它工作得很好。
但是,当我尝试在另一个组件内调用此服务时,它不起作用。
示例:我的另一个组件名为profilesComponent
import { ProgressBarService } from ../progressbar/progressbar.service';
@Component({
selector: 'profiles',
templateUrl: 'profiles.component.html',
providers: [ProgressBarService]
})
export class ProfilesComponent implements OnInit {
toto :boolean = false;
constructor(private $progressbar : ProgressBarService) {}
ngOnInit() {}
showProgress() {
if(this.toto) {
this.$progressbar.hide();
this.toto = false;
} else {
this.$progressbar.show();
this.toto = true;
}
}
}
我认为这是因为这两个组件不共享相同的服务实例,但我找不到这样做的方法。 (也许 @NgModule
中的提供者?)
最佳答案
感谢@micronyks,这是解决方案。
对于每个组件,我在提供者的组件中添加服务。结果,组件创建了服务的新实例。
为了解决该问题,我从每个组件的提供者中删除了该服务,然后将其提供给主模块。
import { ProgressBarService } from './progressbar/progressbar.service';
@NgModule({
imports: [
CommonModule,
BrowserModule,
HttpModule,
AppRoutingModule,
HomeModule,
MaterialModule.forRoot()
],
declarations: [AppComponent, ProgressbarComponent],
providers: [ProgressBarService],
bootstrap: [AppComponent],
})
export class AppModule { }
组件现在共享相同的实例,并且进度条可以很好地显示。
关于angular - 可观察的行为主体服务 - 单例和提供者,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41857439/