Angular 5 - 更改 TS 文件中宿主类的样式 [英] Angular 5 - Change Style of Host Class in TS File

问题描述

我正在尝试使用 ngx-image-cropper，我找到了可用于放大图像的源图像类.

I am trying to use ngx-image-cropper and I have found the class of source-image that could be used to perform zoom in of image.

在inspect元素中，类看起来像这样:

In inspect element, the class look like this:

[_nghost-c7] > div[_ngcontent-c7] .source-image[_ngcontent-c7] {
    max-width: 100%;
    max-height: 100%;
}

我正在尝试更改 TS 文件中的最大宽度和最大高度.我也尝试在 CSS 文件中编写:

I am trying to change the max-width and max-height from TS file. And I also try to write in CSS File:

[_nghost-c7] > div[_ngcontent-c7] .source-image[_ngcontent-c7] {
    max-width: 150%;
    max-height: 150%;
}

但是，什么都没有改变.有什么想法吗?

But, nothing changed. Any idea?

推荐答案

阅读组件样式._nghost-c7 是 angular 在组件封装设置为 enum ViewEncapsulation.Emulated 时生成的类.你不应该在你的应用程序代码中定位它们.看看文档是怎么说的:

Read up about component styles. The _nghost-c7 are classess generated by angular when component encapsulation is set to enum ViewEncapsulation.Emulated. You should not target them in your application code. See what the docs say about it:

它们是自动生成的，您永远不会在应用程序代码中引用它们.但是它们以生成的组件样式为目标，这些样式位于 DOM 的部分 [...] 这些样式经过后期处理，以便每个选择器都增加了 _nghost 或 _ngcontent 属性选择器.

They are automatically generated and you never refer to them in application code. But they are targeted by the generated component styles, which are in the section of the DOM [...] These styles are post-processed so that each selector is augmented with _nghost or _ngcontent attribute selectors.

这篇关于Angular 5 - 更改 TS 文件中宿主类的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！