2

我正在通过分配 style.background-color 属性将 div 的背景颜色设置为动态更新，如下所示。

<div [style.background-color]="cellColor">
  <span>{{ cellColor }}</span>
</div>

在它的打字稿文件中，我分配了一个成功设置的默认颜色。稍后，我通过订阅组件文件的 ngOnInit() 生命周期内的主题来更改属性“cellColor”的值，如下所示。

在服务定义中。

@Injectable()
export class StyleService {
  editClicked = new Subject();
  constructor() { }
}

从另一个组件中，我正在为这样的“cellColor”属性推送新值。

this.styleService.editClicked.next('white');

然后我像这样从组件的 ts 文件订阅主题。

ngOnInit() {
    this.styleService.editClicked.subscribe(
      (color : string) => {
        this.cellColor = color;
        console.log(this.cellColor);
      }
    )
  }

属性已成功更新，但视图未更新。如上所示，我已经使用 [] 括号绑定了我的 div 的样式属性，那么为什么视图不会更新？我在这里错过了什么吗？

但是，对于同一个示例，如果我使用 Observable 进行订阅，则属性会更改并且视图也会更新。

ngOnInit() {
     Observable.of(true)
      .delay(2000)
      .subscribe((success) => {
        if(success){
          console.log('Pretend loading: success!');
          this.cellColor = 'white';
          this.cdr.markForCheck();
        }
      });
}

为什么订阅 Observable 而不是 Subject 时它会起作用？

4

0 回答 0