Angular 5 .- Components 属性没有被更新？？？为什么？答案

【问题标题】：Angular 5 .- Components property is not beeing updated??? why?Angular 5 .- Components 属性没有被更新？？？为什么？
【发布时间】：2018-12-15 04:16:18
【问题描述】：

所以我有这个progressLoaderComponent：

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { ProgressLoaderService } from './progress-loader.service';

@Component({
  selector: 'app-progress-loader',
  templateUrl: './progress-loader.component.html',
  styleUrls: ['./progress-loader.component.scss']
})
export class ProgressLoaderComponent implements OnInit {

  public prgLoaderSubscription: Subscription;

  // Loader Type
  public prgLoaderType;  

  constructor(private _pl: ProgressLoaderService) {
    this.prgLoaderType = 'spinner';
   }

  ngOnInit() {
    this.prgLoaderSubscription = this._pl.loaderSubject$.subscribe(data => {
      this.prgLoaderType = data.loaderType;
      console.log('**************************', this.prgLoaderType);
    });
  }

}

还有progressLoaderSerice：

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


@Injectable()
export class ProgressLoaderService {

  private loaderSubject = new Subject<any>();
  public loaderSubject$ = this.loaderSubject.asObservable();

  constructor() { }

  setLoaderType(loaderType) {
    this.loaderSubject.next({loaderType: loaderType});
  }

}

我从另一个组件调用setLoaderType()，例如： this._pl.setLoaderType('WTF!!!');

现在progressLoaderComponents onInit()-subscription 中的console.log() 确实输出WTF!!!，但无论我尝试什么，prgLoaderType 属性都没有更新。这怎么可能？

【问题讨论】：

你能为此添加一个堆栈闪电战吗？
谁调用了setLoaderType() 函数？
@Luca .. 另一个组件
你也可以发一下吗？

标签： angular service components

【解决方案1】：

根据您的共享代码，我在 stackblitz 上创建了一个 Angular 项目。

看看。 https://stackblitz.com/edit/stackoverflow-51212347

我认为您的代码没有任何问题。它应该按原样工作，我没有修改它。查看app.module.ts 看看你是否正确导入了。同样在 app.component.ts 中，我每隔 1 秒调用一次您的服务，持续 10 秒，您可以看到每次都在设置组件中的变量。

【讨论】：