我有一个名为 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)到服务的变量,或者我是否遗漏了一些东西? 我是新人,正在尝试了解正在发生的事情。
请您参考如下方法:
这不是我所看到的。我将您的代码粘贴到此处的 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()
}
}