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;
        }
    }
}

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

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

我该怎么办？

Answer 1

如果您使用的是角度cli，请将您的打印scss移动到.angular-cli.json文件。这样，当你的组件加载时，它就可以使用了。

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

您可以阅读view reder选项以获取更多详细信息

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

1 个答案: