Question

我有一个名为StatusService的服务和一个名为ListItems的组件。 StatusService中包含“status”var，其中包含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 }
}

我的问题是，似乎服务“status”变量更新后，它会在组件内自动更新（并通过ngClass查看），而我没有通过getStatus（）调用请求服务组件内的更新

它是以某种方式绑定到服务的变量还是我错过了什么？我是新手，并试图围绕正在发生的事情。

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()
  }

}

组件变量是否自动绑定到服务变量

1 个答案: