在 Angular 中使用 @media print 不起作用

Question

我正在尝试使用 Angular (5+) 创建一个可打印的页面，但是我遇到了样式问题。

我要打印的内容在组件内部，样式是通过在 stylesUrls 下定义的文件发送的，如下所示：

@Component({
    templateUrl: 'print-page.html',
    styleUrls: [
        '_print-page.scss'
    ],
})

蚂蚁的样式是这样的：

@media print {
    body *:not(#print),
    aside {
        display: none !important;
    }

    #print {
        figure {
            display: none;
        }
    }
}

但是当我打开打印选项卡页面时，图形元素被隐藏了，但是例如 side 元素仍然显示在页面上。它没有被隐藏。

我尝试将样式移出组件并将其直接设置在样式文件中。当我这样做时，其他元素被隐藏，包括要打印的 div。无论我做什么，我都无法阻止样式只显示#print div。

我该怎么办？

Answer 1

如果您使用 angular cli，请将您的打印 scss 移动到 .angular-cli.json 文件。这样，当您的组件加载时，它就可用并准备就绪。

  "prefix": "xyz",
  "styles": [
    "_print-page.scss",
    "style.scss",

您可以阅读查看 reder 选项了解更多详情