Question

我正在开发一个Angular 5项目。我经常需要显示app加载微调器。为此我在模块中创建了一个共享模块和微调器组件。这是我的模块文件，

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
import { SharedMaterialModule } from 'app/shared/modules/shared-material.module';
import { TimePickerComponent } from './time-picker/time-picker.component';
import { ReactiveFormsModule } from '@angular/forms';
import { SpinnerComponent } from './spinner/spinner.component';
import { SpinnerService } from './spinner/spinner.service';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http);
}
@NgModule({
    imports: [
        CommonModule,
        ReactiveFormsModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: HttpLoaderFactory,
                deps: [HttpClient]
            }
        }),
        SharedMaterialModule
    ],
    declarations: [        
        ConfirmationDialogComponent,
        TimePickerComponent,
        SpinnerComponent
    ],
    exports: [
        TranslateModule,
        TimePickerComponent,
        SpinnerComponent
    ],
    providers: [
        SpinnerService
    ],
    bootstrap: [ ConfirmationDialogComponent ]
})
export class UtilityModule { }

这是微调器组件，

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SpinnerService } from './spinner.service';
import { Subscription } from 'rxjs/Subscription'

@Component({
    selector: 'app-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit, OnDestroy {

    spinnerStateListener: Subscription;
    showSpinner: boolean = false;

    constructor(private spinnerService: SpinnerService) { }

    ngOnInit() {
        this.registerSpinnerStateListener();
    }

    private registerSpinnerStateListener() {
        this.spinnerStateListener = this.spinnerService.spinnerState.subscribe((spinnerState) => {
            this.showSpinner = spinnerState.show;
            console.log(spinnerState);
        });
    }

    ngOnDestroy() {
        this.spinnerStateListener.unsubscribe();
    }

}

为了通知微调器何时显示和隐藏我在服务文件中使用RxJS Subject

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()

export class SpinnerService {

    spinnerState = new Subject<{ show: boolean }>();

    changeSpinnerState(state: boolean) {
        console.log(state);
        this.spinnerState.next({ show: state });
    }

}

我正在整个应用程序中使用这个微调器。当我从另一个组件（在另一个模块中）中发出新值时，订阅在spinner组件中不起作用。这是组件文件和辅助模块，

import { Component, OnInit } from '@angular/core';
import { SpinnerService } from './spinner.service';

@Component({
    selector: 'app-contact-form',
    templateUrl: './contact-form.component.html',
    styleUrls: ['./contact-form.component.css']
})
export class ContactComponent implements OnInit {

    constructor(private spinnerService: SpinnerService) { }

    ngOnInit() {
        this.spinnerService.changeSpinnerState(true);
    }  
}

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';

import { CrmRoutingModule } from './crm-routing.module';
import { SharedMaterialModule } from '../../shared/modules/shared-material.module';


import { ContactFormComponent } from './contacts/contact-form/contact-form.component';
import { SpinnerService } from '../../shared/modules/utility/spinner/spinner.service';

@NgModule({
    declarations: [        
        ContactFormComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        CrmRoutingModule,
        SharedMaterialModule,
        UtilityModule
    ],
    providers: [
        SpinnerService
    ],
    bootstrap: [

    ]
})

export class CrmModule {

}

当我发出一个值时，它最多可以达到微调器服务文件中的changeSpinnerState方法。但是spinner组件中的订阅不起作用。我的代码中的错误是什么？谢谢

Answer 1

使用EventEmitter（未测试，也许你需要一些导入），你可以做这样的事情......

服务，声明一个EventEmitter来传递布尔数据。

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()

export class SpinnerService {

    spinnerState = new EventEmitter<boolean>();

}

带有微调器html的组件。订阅活动并根据状态（真/假）在事件发生时做任何事情

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SpinnerService } from './spinner.service';
import { Subscription } from 'rxjs/Subscription'

@Component({
    selector: 'app-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.css']
})
export class SpinnerComponent implements OnInit, OnDestroy {


    showSpinner: boolean = false;

    constructor(private spinnerService: SpinnerService) { 
            this.spinnerService.spinnerState.subscribe(
                (status:boolean) => showSpinner = status;
            );
    }
}

每当你必须显示微调器发出带有true / false

的事件时

import { Component, OnInit } from '@angular/core';
import { SpinnerService } from './spinner.service';

@Component({
    selector: 'app-contact-form',
    templateUrl: './contact-form.component.html',
    styleUrls: ['./contact-form.component.css']
})
export class ContactComponent implements OnInit {

    constructor(private spinnerService: SpinnerService) { }

    ngOnInit() {
        this.spinnerService.spinnerState.emit(true)
    }  
}

在两个模块之间订阅主题在角度5中无法正常工作

1 个答案: