如何在 Angular 中打印单个组件？

Question

在单个角度组件中，我希望有一个打印按钮，当用户单击该按钮时，div将从我的组件模板中打印一个。

我知道这个答案有效，我试过了。但我不喜欢我需要重新应用所有样式或重写<style>head 标签中的所有样式。

我真的很喜欢这个答案，但我无法让它发挥作用。我认为这可能与在提供/构建应用程序后如何重命名类有关。

这就是我实现上述答案但无法使其工作的方式。

组件.ts

onPrint() {
  window.print();
}

组件.html

<div class="print">
  <button (click)="onPrint()">Print</button>
  all the stuffs I want to print
</div>

组件.scss

@media print {
  :not(.print) {
    display: none !important;
  }
}

我怎样才能得到上面的答案以产生尽可能少的代码，并保留应用于前端的样式？

我意识到问题是如何相似，这一个，但这个问题是两年前被要求与关于角2.不太确定它是如何与不同的问候角6。

Answer 1

组件 CSS 中的样式仅适用于该单个组件，这就是父组件垫选项卡仍然显示的原因。

作为替代方案，您可以将样式添加到style.css/中styles.scss。这样做的问题是，父 DOM 元素（例如body）也将被设置display: none为，因此没有任何内容可见。

您可以尝试像这样使用visibilityin styles.css：

@media print {
  :not(.printMe) {
    visibility: hidden;
  }
}

@media print {
  .printMe {
    visibility: visible
  }
}

根据您的用例，这可能会有所帮助，尽管hidden元素仍会占用页面上的空间。