我有一个名为 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() 
  } 
 
} 


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!