Question

我在这里做错了什么。我创建了一个服务，其中包含一个我正在使用setInterval更新的属性。

我正在将此服务注入到组件中，并希望组件观察属性以进行更改以更新屏幕。但是只显示numCount的初始值，并且它永远不会更新。

示例：

这是我创建的测试服务

export class TestService {
    numCount: number;

    constructor() {
      this.numCount = 0;

      var self = this;
      setInterval(function() {
          self.numCount++;
          console.log('from service', self.numCount);
      }, 500);
    }
}

这是组件

export class MyComponentView implements OnChanges  {

    displayString: string;

    constructor(testService: TestService) {

          this.displayString = testService.numCount.toString();
    }

    ngOnChanges(changes) {
      console.log(changes); // nothing logs out, even though the testService.numCount is being incremented in the class. 
    }
}

如果你看到这里，testService.numCount每半秒增加一个。但是当我通过组件在屏幕上显示它时，它不会更新。如何从注入的服务中查看数据，以便在屏幕上更新？

我在屏幕上显示displayString，但数字不会改变。

Answer 1

您只需将值复制一次，而您的组件仅适用于此值。

this.displayString = testService.numCount.toString();

您也可以直接将视图绑定到服务

{{testService.numCount}}

或向您的服务添加EventEmitter

export class TestService {
    numCount: number;

    numCountChange = new EventEmitter();
    constructor() {
      this.numCount = 0;

      var self = this;
      setInterval(function() {
          self.numCount++;
          self.numCountChange.next(self.numCount);
          console.log('from service', self.numCount);
      }, 500);
    }
}

然后在你的组件订阅更改

constructor(testService: TestService) {
   testService.numCountChange.subscribe(value => {
       this.displayString = testService.numCount.toString();
   });
}

ngOnChanges()也仅在@Input() xxx从<my-comp [xxx]="parentProperty">之类的绑定更改时调用，而不是在组件中的正常字段发生更改时调用。

为什么更改检测在我的Angular 2代码中不起作用？

1 个答案: