Angular 使用rxjs BehaviorSubject加载微调器

我为我的angular 4应用程序创建了一个加载微调器组件，该组件应该在AJAX调用期间显示，但我在订阅BehaviorSubject时无法显示它

这个问题涉及但不是重复的（因为我想用一个可重用的组件）和（尽管我看不出我的代码和公认的答案之间有什么区别。我遗漏了什么吗？）

我基本上遵循了这个教程

以下是我的一些代码：

应用程序模块.ts

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {SomeComponent} from './some.component';
import {LoaderComponent} from './loader/loader.component';
import {LoaderService} from './loader/loader.service';

@NgModule({
    declarations: [
        AppComponent,
        LoaderComponent,
        SomeComponent
    ],
    imports: [
        BrowserModule,
        NoopAnimationsModule,
        AppRoutingModule
    ],
    providers: [
        LoaderService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

import {Component, OnInit} from '@angular/core';
import {LoaderService} from './loader.service';

@Component({
    selector: 'app-loader',
    templateUrl: 'loader.component.html',
    providers: [LoaderService]
})

export class LoaderComponent implements OnInit {
    isLoading: boolean;

    constructor(private loaderService: LoaderService) {
    }

    ngOnInit() {
        this.loaderService.status.subscribe((val: boolean) => {
            this.isLoading = val;
        });
    }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
    public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    display(value: boolean) {
        console.log('LoaderService.display ' + value);
        this.status.next(value);
    }
}

app.component.html

<router-outlet></router-outlet>
<app-loader></app-loader>

<div class="loader" *ngIf="isLoading"></div>

constructor(private http: Http, private loaderService: LoaderService) {
}

getSomeStuff(): Observable<SomeItem[]> {
    // show the loading spinner
    this.loaderService.display(true);

    const content = this.http.get(this.apiUrl)
        .map(this.extractData);

    content.subscribe(
        () => {
            // hide the loading spinner
            this.loaderService.display(false);
        }
    );

    return content;
}

loader.service.ts

import {AppComponent} from './app.component';
import {AppRoutingModule} from './app-routing.module';
import {SomeComponent} from './some.component';
import {LoaderComponent} from './loader/loader.component';
import {LoaderService} from './loader/loader.service';

@NgModule({
    declarations: [
        AppComponent,
        LoaderComponent,
        SomeComponent
    ],
    imports: [
        BrowserModule,
        NoopAnimationsModule,
        AppRoutingModule
    ],
    providers: [
        LoaderService
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

import {Component, OnInit} from '@angular/core';
import {LoaderService} from './loader.service';

@Component({
    selector: 'app-loader',
    templateUrl: 'loader.component.html',
    providers: [LoaderService]
})

export class LoaderComponent implements OnInit {
    isLoading: boolean;

    constructor(private loaderService: LoaderService) {
    }

    ngOnInit() {
        this.loaderService.status.subscribe((val: boolean) => {
            this.isLoading = val;
        });
    }
}

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class LoaderService {
    public status: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

    display(value: boolean) {
        console.log('LoaderService.display ' + value);
        this.status.next(value);
    }
}

---

因此，在初始化组件时，对loader.component.ts中更改

isLoading

值的loaderService订阅只调用一次。但据我所知，只要

LoaderService.status

发生变化，就应该调用BehaviorSubject如何工作。为什么不呢？我做错了什么？

问题是由于

装载机组件中的这一行造成的：

providers: [LoaderService]

通过使用组件级提供程序指定服务，您将通知Angular组件将接收其自身的服务实例。那不是你想要的；您希望共享模块级实例

只需从
LoaderComponent
中删除该行，即可使用该服务的单个实例。
从
LoaderComponent
中删除
providers:[LoaderService]
@cartant AWESOME！这就解决了！谢谢！你能把它作为答复提交给我吗？这样我就可以接受了？另外，你能解释一下为什么这个解决了这个问题吗？再次感谢！这完全有道理，因为我应该使用的实例是来自模块提供者的实例。