javascript - 组件变量是否自动绑定(bind)到服务变量

Question

我有一个名为 StatusService 的服务和一个导入该服务的名为 ListItems 的组件。 StatusService 中有一个“status”变量，其中包含 ListItems 中列表项的信息。 (假设状态有“待处理”和“完成”样式 - 红色边框或其他)

import { Component } from '@angular/core';
import { StatusService  } from './';

@Component({
selector: 'list-items',
template: `
 <div
    class="first-item"
    [ngClass]="status"
></div>`
})

export class ListItems implements OnInit{
constructor(private statusService:StatusService ) { }
status;

ngOnInit() {
    this.status = this.statusService.getStatus()
}  

onClickEvent(){
    this.statusService.setStatus("complete")
    // no need for this.status = this.statusService.getStatus()
}

}

class StatusService{
constructor(){}
status;

getStatus(){ return status; }
setStatus(status){ this.status = status }
}

我的问题是，似乎当服务“状态”变量更新时，它会在组件内自动更新(并且通过 ngClass 查看)，而无需我通过 getStatus() 调用从服务请求组件内的更新.

它是否以某种方式绑定(bind)到服务的变量，或者我是否遗漏了一些东西？ 我是新人，正在尝试了解正在发生的事情。

Answer 1

这不是我所看到的。我将您的代码粘贴到此处的 stackblitz 中:https://stackblitz.com/edit/angular-r1tyjm

当我运行并单击按钮时，组件不会自动更新服务数据。

如果将组件 status 属性更改为 getter ...那么更改检测将始终从服务获取更新的值:

export class ListItems implements OnInit {

  // Changes the status declaration to this
  get status(): string {
    return this.statusService.getStatus();
  }

  constructor(private statusService: StatusService) { }

  ngOnInit() {
    console.log(this.status);
  }

  onClickEvent() {
    this.statusService.setStatus("complete")
    // no need for this.status = this.statusService.getStatus()
  }

}