Question

我有一个非常简单的要求。当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$从主题更改为BehaviorSubject改为ReplaySubject

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

Answer 1

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

hideToolbarHeader$ = this.headerService.hideToolbarHeader$;

和模板中

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

更改组件属性中的值是否不会触发更改检测？但是在单击组件时可以使用吗？

1 个答案: