动态加载角元的CSS变化

Question

我已经在我的图像视图中实现了NG2-图像查看器库，它正在动态地加载许多HTML组件。我希望更改一些动态加载元素的CSS。

这是我默认拥有的。

​

​

呈现前的HTML组件如下所示，

<div class="image-viewer-container">
    <app-image-viewer 
    [images]="[artURL]"
    [loadOnInit]="true"
    [idContainer]="'idOnHTML'"
    [showOptions]="false"
    >
    </app-image-viewer>
</div>

呈现后的上面的HTML组件如下所示，

<div _ngcontent-pyx-c10="" class="image-viewer-container">
    <app-image-viewer _ngcontent-pyx-c10="" _nghost-pyx-c11="" ng-reflect-id-container="idOnHTML" ng-reflect-images="http://localhost/artworks/art/" ng-reflect-load-on-init="true" ng-reflect-show-options="false">
        <div _ngcontent-pyx-c11="" class="image-gallery-2" id="idOnHTML">
            <div _ngcontent-pyx-c11="" class="image-container iv-container">
                <div class="iv-wrap">
                    <div class="iv-loader" style="display: none;"></div>
                    <div class="iv-snap-view" style="opacity: 0; pointer-events: none;">
                        <div class="iv-snap-image-wrap"><img class="iv-snap-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="width: 137.062px; height: 149px;">
                            <div class="iv-snap-handle" style="top: 0px; left: -130.863px; width: 398.787px; height: 149px;"></div>
                        </div>
                        <div class="iv-zoom-slider">
                            <div class="iv-zoom-handle" style="left: 0px;"></div>
                        </div>
                    </div>
                    <div class="iv-image-view">
                        <div class="iv-image-wrap"><img class="iv-image iv-large-image" src="http://localhost/artworks/art/a/aagaard/rosegard.jpg" style="visibility: visible; width: 597px; height: 649px; left: 570px; top: 0px; max-width: none; max-height: none;"></div>
                    </div>
                </div>
            </div>
            <div _ngcontent-pyx-c11="" class="inline-icon" style="background-color: rgb(1, 118, 189);">
                <div _ngcontent-pyx-c11="">
                    <!--bindings={
  "ng-reflect-ng-if": "true"
}-->
                    <a _ngcontent-pyx-c11="" class="image-viewer-tooltip ng-star-inserted">
                        <!--bindings={
  "ng-reflect-ng-if": "true"
}--><span _ngcontent-pyx-c11="" class="tooltiptext filterTooltip ng-star-inserted"><span _ngcontent-pyx-c11="">Show only PDF:</span><i _ngcontent-pyx-c11="" class="material-icons">close</i></span><i _ngcontent-pyx-c11="" class="material-icons footer-icon" style="color: white;">picture_as_pdf</i></a>
                </div>
                <!--bindings={
  "ng-reflect-ng-if": "false"
}-->
            </div><i _ngcontent-pyx-c11="" class="material-icons prev">keyboard_arrow_left</i><i _ngcontent-pyx-c11="" class="material-icons next">keyboard_arrow_right</i>
            <div _ngcontent-pyx-c11="" class="footer-info" style="background-color: rgb(1, 118, 189);"><span _ngcontent-pyx-c11="" id="current">1</span>/<span _ngcontent-pyx-c11="" class="total">1</span></div>
        </div>
    </app-image-viewer>
</div>

我所要做的就是通过简单地在SCSS 中定义呈现的，将其应用于呈现的HTML，但它似乎不起作用。

.iv-snap-view{
    visibility: visible !important;
    opacity: 1;
}
.image-gallery-2{
    visibility: hidden;
}

Answer 1

由于组件的样式是封装的(您可以阅读更多关于此这里的信息)，您有两个选项：

1. 创建全局样式表并在其中添加所需的样式，或者将全局样式复制到src/styles.css中
2. 使用::ng-deep。你可以找到更多的信息，这里

将:ng深伪类应用于任何CSS规则，将完全禁用该规则的视图封装。任何有:ng深应用的样式都会成为一种全球风格。为了将指定的样式范围调整到当前组件及其所有子组件，请确保在前面包含：：ng-深度的主机选择器。如果使用：：ng深组合器而不使用:host伪类选择器，则样式可能会溢出到其他组件中。

注意:即使不推荐使用::ng-deep，也没有指定何时删除它，因为目前别无选择。