Angular не обновляет вид на обновления - PullRequest
1 голос
/ 11 апреля 2019

У меня есть служба, где я слушаю события печати браузера.

@Injectable()
export class ApplicationSession {
  printStream$: Observable<boolean>;

  constructor() {
    this._setupPrintListener();
  }

  private _setupPrintListener(): void {
    if (this._window.matchMedia) {
      const beforePrintEvent = fromEvent(this._window, 'beforeprint')
        .pipe(mapTo(true));
      const afterPrintEvent = fromEvent(this._window, 'afterprint')
        .pipe(mapTo(false));

      this.printStream$ = merge(beforePrintEvent, afterPrintEvent).pipe(startWith(false));
    }
  }
}

Затем в моем компоненте я связываю свойство со свойством printStream$ экземпляра службы.Например,

export class ReferralComponent {
  printRequested$: Observable<boolean>;

  constructor(session: ApplicationSession) {
    this.printRequested$ = session.printStream$;
    //Observing values here
    this.printRequested$.subscribe(console.log);
  }
}

Я использую свойство компонента printRequested$ для асинхронного создания и уничтожения углового компонента.

<generic-angular-component *ngIf="printRequested$ | async"></generic-angular-component> 

У меня есть дочерний компонент в ReferralComponent, который имееткнопка, которая запускает функцию window.print().Например,

@Component({
  template: `<button (click)="print()">Print</button>`
})
export class ChildComponent {
  print() {
    window.print();
  }
}

Моя проблема в том, что когда я нажимаю Command / Ctrl + P на клавиатуре, я вижу угловое создание и уничтожение <generic-angular-component>.Однако, когда я запускаю window.print() с помощью нажатия кнопки дочернего компонента, я вижу, что значения true/false передаются в потоке.Тем не менее, Angular, похоже, не заботится об этом вообще.Я не вижу компонент вообще.

Вот воспроизведение stackblitz .Вы можете нажать кнопку «Печать» и увидеть, что в нижней левой части страницы предварительного просмотра печати нет строки Toggle Me .Или вы можете нажать Ctrl + P и увидеть, что он ( Toggle Me ) находится внизу слева.

...