如何解决在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];
}
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。