Angular2使用服务传递一个对象

Question

我的项目中有一些组件需要先完成之前的步骤才能继续下一步。

我已经尝试在我的服务中创建一个函数，这个函数都是共同的共享文件，以便于切换状态指示器。

服务

file2

组件：

// Loading indicator
private isLoading = {
    enabled: false,
    step: null
};

/**
 * Set the status for our loading indicator
 *
 * @param isLoading
 * @param step
 */
setLoader(isLoading, step) {
    this.isLoading = {
        enabled: isLoading,
        step: step
    };
    console.log(this.isLoading);
}

HTML：

this._massEmpService.setLoader(true, 'step2');

单击组件中的按钮时，将在服务中调用该函数，并且我看到正确打印的对象。但是，我在另一个组件中的HTML未根据此状态更改显示。

数据不能通过这样的服务传递吗？

Answer 1

视图未更新，因为现在调用了ApplicationRef.tick()。

您有两种方法可以改进：

1。从您的服务中返回可观察的

实施将类似于：

service.ts

import {Observable, BehaviorSubject} from 'rxjs';

export class Service {

    public isEnabled: BehaviorSubject<boolean> = new BehaviorSubject<boolean>();
    public step: BehaviorSubject<number> = new BehaviorSubject<number>();

    setLoader(isLoading, step) {
         this.isLoading = {
              enabled: isLoading,
              step: step
         };

         this.isEnabled.next(this.isLoading.enabled);
         this.step.next(this.isLoading.step);
         console.log(this.isLoading);
    }
}

component.ts：

@Component({})
export class Component {
     public isEnabled: Observable<boolean> = this.service.isEnabled;
     public step: Observable<number> = this.service.step;
}

component.html：

<div *ngIf="(isEnabled | async) && (step == 'step2' | async)" class="loader" align="center">
  <img src="images/loading-bars.svg" alt="" />
</div>

2。实施＆＃34;手动＆＃34;通知视图，它应该更新。

这将是：

import {ApplicationRef} from '@angular/core';

export class Service {
     constructor(private appRef: ApplicationRef) {}
     setLoader(isLoading, step) {
          this.isLoading = {
               enabled: isLoading,
               step: step
          };
          console.log(this.isLoading);
          this.appRef.tick();
     }
}

有关ApplicationRef的更多信息：https://angular.io/api/core/ApplicationRef

选择取决于你。这取决于更适合您的需求。