在Ctrl + P之后，所有fxHide指令都会触发，而忽略视口大小

问题描述

在具有材料设计的Angular 10上。

在大视口的打开视图中，单击Ctrl + P并关闭打印窗口将隐藏所有带有fxHide指令的元素。

这大约是一周前开始的（如果有的话，请不要拒绝）。还有其他人遇到过吗？

所有fxHide指令都会忽略视口大小，这意味着顶部按钮将显示，而下部按钮将不显示。使用fxHide指令的页面上的任何元素都将隐藏。

            <button mat-icon-button (click)="showFilterDialog('payments')">
                <mat-icon aria-label="Filter"
                          matTooltip="Filter"
                          class="text-grey">
                    filter_list
                </mat-icon>
            </button>
            <button mat-icon-button (click)="onExport()" fxHide.xs> <!-- This will hide! -->
                <mat-icon aria-label="Export payments"
                          matTooltip="Export"
                          class="text-grey">
                    cloud_download
                </mat-icon>
            </button>

解决方法

根据https://github.com/angular/flex-layout/issues/1201#issuecomment-608468692的临时修订

将此添加到包含import { FlexLayoutModule } from '@angular/flex-layout';的模块中

（记住要导入MediaMarshaller）

export class PaymentsModule {
    lastValue;
  
    public constructor (m: MediaMarshaller) {
        // hack until resolve: https://github.com/angular/flex-layout/issues/1201
        // @ts-ignore
        m.subject.subscribe(() => {
            // @ts-ignore
            if (m.activatedBreakpoints.filter((b) => b.alias === 'print').length === 0) {
                // @ts-ignore
                this.lastValue = [...m.activatedBreakpoints];
            } else {
                // @ts-ignore
                m.activatedBreakpoints = [...this.lastValue];
                // @ts-ignore
                m.hook.collectActivations = () => {};
                // @ts-ignore
                m.hook.deactivations = [...this.lastValue];
            }
        });
    }
}