如何在打印mat-dialog时隐藏@media print的Angular 9背景组件？

Question

这是我的styles.css文件，这里的app-labour-value-estimate-print-layout是一个基于app-material-details组件的mat-dialog组件。当我尝试打印这个对话框时，从后台弹出一些东西，所以app-root > * { display: none;}这是有帮助的。但是，当添加此代码时，任何其他组件都不会显示在打印中，因为它们嵌套在app-root中。如何在不受后台干扰的情况下打印根组件和mat-dialog组件？

@media print {
  /*app-root > * {
    display: none;
  }*/
  app-footer  {
    display: none;
  }
  app-labour-value-estimate-print-layout {
    display: block;
  }
  app-material-details {
    display: block;
  }
}

Answer 1

在media-print中试试这个

.cdk-overlay-pane {
  width: 100%;
  max-width: none;
}

mat-dialog-container {
 width: 100vw;
 height: 100%;
 min-height: 100vh;
 padding: 0;
 margin: 0;
}