时间戳

首页 > 解决方案 > 更改组件属性中的值不会触发更改检测？但是单击组件时有效吗？

angular - 更改组件属性中的值不会触发更改检测？但是单击组件时有效吗？

问题描述

我有一个非常简单的要求。当属性值hideToolBarHeader设置为true使用 [ngClass] ="{'my-class': hideToolBarHeader} 隐藏工具栏标题时。传入的值来自服务。该服务如下所示：

`@Injectable({
  providedIn: 'root'
})
export class HeaderService {
  hideToolbarHeader$: ReplaySubject<boolean> = new ReplaySubject(1);  

  constructor() { }

  hideToolbar(hideToolbar: boolean): void{
    this.hideToolbarHeader$.next(hideToolbar); 
    console.log('[Inside HeaderService]');   
    this.hideToolbarHeader$    
  }

}`

该组件如下所示：

`ngOnInit(){           
    this.headerService.hideToolbarHeader$.subscribe((value) => {
      console.log('EXECUTED WITH VALUE', value)
      this.hideToolBarHeader = value;     
    })  
}`

控制台记录正确的值。

组件 html 模板：

`<div class="toolbar" [class.mat-elevation-z7]="isSticky" [ngClass]="{'hide-toolbar': hideToolBarHeader }" >   

    <mat-toolbar #toolbarDiv color="primary" [ngStyle]="{backgroundColor: (isSticky) ? null : 'transparent'}">
...
</mat-toolbar>`

更改检测不会在工具栏组件中触发。值得注意的是，标题组件已经实例化并创建，而触发值更改的组件稍后出现。

我尝试过： - 强制更改检测手动运行，ChangeDetectorRef但没有运气。-hideToolbarHeader$从 Subject 更改为 BehaviorSubject 到 ReplaySubject

我在模板 p 标签中显示了 this.hideToolBarHeader 的值。我可以在控制台中看到该值是正确的。仅当我单击导航标题时，该值才会更改。有时它会在我上下滚动一点后随机变化。怎么了？

标签： angularrxjsobservable

解决方案

在可观察对象上使用异步管道而不是订阅

hideToolbarHeader$ = this.headerService.hideToolbarHeader$;

并在模板中

[ngClass]="{'hide-toolbar': (hideToolbarHeader$ | async) }"

推荐阅读