Question

如何将布尔值从服务发送到组件。这个布尔值将在2个函数（onStartBlockUI和onStopBlockUI）中更改其值。对于第一个函数onStartBlockUI，此布尔值为true；对于第二个函数onStopBlockUI，此布尔值为false。我想在订阅组件时获得此值。我将不胜感激任何帮助。谢谢！

import { Component, OnInit } from '@angular/core';
import { LoadingService } from './loading.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss'],
  providers: [LoadingService]
})
export class LoadingComponent implements OnInit {
  private blockUIState: boolean;
  private subscriptionBlockUI: Subscription;
  constructor(private loadingService: LoadingService) {

    this.subscriptionBlockUI = this.loadingService.onBlockUIState().subscribe(blockUIState => {
      this.blockUIState = blockUIState;
      console.log('this.blockUIState', this.blockUIState);
    });

  }

  ngOnInit() {

  }

  ngOnDestroy(): void {
    this.subscriptionBlockUI.unsubscribe();
  }

}

import { Injectable } from '@angular/core';
import { BlockUI, NgBlockUI } from 'ng-block-ui';
import { Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class LoadingService {
  @BlockUI() blockUI: NgBlockUI;
  public blockUIState = new Subject<boolean>();

  constructor() {
    this.onStartBlockUI();
    this.onStopBlockUI();
  }
  
  onStartBlockUI(): void {
    this.blockUI.start('Start loading...');
    this.blockUIState.next(true);
  }

  onStopBlockUI(): void {
    setTimeout(() => {
      this.blockUI.stop(); // Stop blocking
    }, 2000);
    this.blockUIState.next(false);
  }

  onBlockUIState(){
    return this.blockUIState;
  }
}

Answer 1

您需要将其更改为

onStopBlockUI(): void {
  setTimeout(() => {
    this.blockUIState.next(false);
    this.blockUI.stop();  // Stop blocking
  }, 2000);
}

因为setTimeout（）的内部函数在给定时间（此处为2000）之后执行。

Answer 2

我认为您想使用BehaviorSubject而不是Subject。

BehaviorSubjects重播每个订阅的实际值，您可能会错过组件中的第一个值

如何将布尔值从服务发送到具有可观察性的组件？（角度）

2 个答案: