4

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

这个问题与如何显示微调器有关，直到时间数据从 angular2 中的服务器收到但不是重复的（因为我想使用可重用的组件）和Angular 2 + RxJS BehaviorSubject 订阅调用不起作用（虽然我不'看不出我的代码和接受的答案有什么区别。我错过了什么吗？）

我基本上遵循了本教程https://hassantariqblog.wordpress.com/2017/03/22/angular2-using-custom-loader-spinner-as-service-in-angular-2-application/

这是我的一些代码：

app.modules.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 {
}

app.component.html

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

loader.component.html

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

loader.component.ts

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

loader.service.ts

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

某些服务中执行 AJAX 调用的方法

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

问题是加载程序永远不会显示，因为isLoading永远不会设置为true. 控制台输出：

LoaderComponent subscription false
LoaderService.display true
LoaderService.display false

因此，在初始化组件时，更改 loader.component.ts 中值的 loaderService 订阅isLoading只会被调用一次。但据我了解BehaviorSubject应该如何工作，它应该被调用，每当LoaderService.status改变。为什么不？我究竟做错了什么？

4

1 回答 1

3

问题是由于这一行LoaderComponent：

providers: [LoaderService]

通过使用组件级提供者来指定服务，你是在通知 Angular 组件将接收它自己的服务实例。那不是你想要的；您想共享模块级实例。

只需删除该行，LoaderComponent以便使用该服务的单个实例。

于 2017-09-19T23:06:46.840 回答