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?

推荐答案

阅读有关组件样式.当组件封装设置为枚举ViewEncapsulation.Emulated时， _nghost-c7 是由angular生成的类.您不应在应用程序代码中将它们作为目标.看看文档对此有何评论:

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屋！