Изменение значения в свойстве компонента не вызывает обнаружение изменений? А работает при нажатии на компонент? - PullRequest
Новая
       13

Изменение значения в свойстве компонента не вызывает обнаружение изменений? А работает при нажатии на компонент?

0 голосов
/ 02 мая 2019

У меня очень простое требование. Когда для свойства 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

У меня есть значение this.hideToolBarHeader, отображаемое в теге p шаблона. Я вижу, что значение правильно в консоли. Значение меняется только когда я щелкаю заголовок навигации. Иногда это будет случайным образом меняться после того, как я немного прокручиваю вверх и вниз. Что происходит?

1 Ответ

0 голосов
/ 02 мая 2019

Используйте асинхронный канал на наблюдаемой вместо подписки 

hideToolbarHeader$ = this.headerService.hideToolbarHeader$;

и в шаблоне 

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