У меня есть служба, где я слушаю события печати браузера.
@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 ) находится внизу слева.