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

Question

这是我的styles.css 文件，这里app-labour-value-estimate-print-layout 是一个mat-dialog 组件，它位于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;
}