Есть ли конфликт между ngIf и Observable, полученными из BehaviourSubject?

Question

Я столкнулся с очень странной проблемой. Я использовал Observable в * ngIf для отображения ошибки вместе с асинхронным каналом.

Проблема в том, что DOM не обновляется при обновлении значения Observable. Он обновляется только когда я нажимаю на страницу или фокусируется с помощью клавиатуры.

Итак, как мне связать Observable с DOM?

Я пробовал различные решения для связывания DOM с использованием * ngIf, если еще в * ngIf, с и без асинхронного конвейера и т. Д.

Вот как я использовал в HTML.

<div style="font-size: 0.9rem;" *ngIf="messageInfo | async"
     [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
     'alert-danger': message.type === 'error' }">{{message.text}}
  <span (click)="close()" style="cursor: pointer; float: right;">
    <i class="material-icons icon-20 vertical-bottom">close</i>
  </span>
</div>

Код компонента

export class AlertComponent implements OnInit {

  message: any;
  messageInfo: Observable<any>;

  constructor(private alertService: AlertService) {
  }

  ngOnInit() {
    this.messageInfo = this.alertService.getMessage();
    this.messageInfo.subscribe(message => {
      this.message = message;
    });
  }

  close() {
    this.alertService.close();
    this.message = undefined;
  }
}

Услуги

export class AlertService {

  private subject = new BehaviorSubject<any>(null);
  private keepAfterNavigationChange = false;

  constructor(private router: Router) {
    // clear alert message on route change
    router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        if (this.keepAfterNavigationChange) {
          // only keep for a single location change
          this.keepAfterNavigationChange = false;
        } else {
          // clear alert
          this.subject.next(null);
        }
      }
    });
  }

  success(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'success', text: message});
    // to hide message after 3 seconds.
    setTimeout(() => {
      this.close();
    }, 3000);
  }

  error(message: string, keepAfterNavigationChange = false) {
    this.keepAfterNavigationChange = keepAfterNavigationChange;
    this.subject.next({type: 'error', text: message});
    // to hide message after 3 seconds.
    setTimeout(() => {
      this.close();
    }, 3000);
  }

  getMessage(): Observable<any> {
    return this.subject.asObservable();
  }

  close() {
    this.subject.next(null);
  }
}

Я использую его во всех остальных компонентах следующим образом:

<alert></alert>

Я ожидаю обновить пользовательский интерфейс в соответствии со значением Observable, не щелкая и не фокусируясь на странице. К сожалению, оно обновляется только тогда, когда я фокусируюсь на странице с помощью мыши или клавиатуры.

Answer 1

Можете ли вы попробовать следующее -

Удалить message переменную из компонента И удалить this.messageInfo.subscribe строку И обновите свой шаблон так.

 <div style="font-size: 0.9rem;" *ngIf="(messageInfo | async) as message"
         [ngClass]="{ 'alert': message, 'alert-success': message.type === 'success',
         'alert-danger': message.type === 'error' }">{{message.text}}
      <span (click)="close()" style="cursor: pointer; float: right;">
        <i class="material-icons icon-20 vertical-bottom">close</i>
      </span>
    </div>

Answer 2

Обновите переменную внутри ngZone, как предложено здесь: В вашем случае это должно быть так:

public constructor(private _ngZone: NgZone) {}
this.messageInfo.subscribe(message => {
   this._ngZone.run(() => {
      this.message = message;
   });
});

https://github.com/angular/angular/issues/7381#issuecomment-191456151

Если это не работает, вы можете попробовать использовать:

import { ChangeDetectorRef } from '@angular/core';
public constructor(private cdr: NgZone) {}
this.messageInfo.subscribe(message => {
      this.message = message;
      this.cdr.markForCheck();
});