Question

我有一项服务，可以监听浏览器的打印事件。

@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 行。或者，您可以按Command / Ctrl + P并在左下角看到它（ Toggle Me ）。

Angular不更新更新视图

0 个答案: