0

我已经为我的图像视图实现了 ng2-image-viewer库，并且它动态加载了许多 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>

我要做的就是通过简单地定义它们来应用呈现的 HTML，SCSS但它似乎不起作用。

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

1 回答 1

2

由于组件的样式被封装（您可以在此处阅读更多相关信息），您有两种选择：

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

将 ::ng-deep 伪类应用于任何 CSS 规则会完全禁用该规则的视图封装。应用 ::ng-deep 的任何样式都将成为全局样式。为了将指定样式限定为当前组件及其所有后代，请确保在 ::ng-deep 之前包含 :host 选择器。如果在没有 :host 伪类选择器的情况下使用 ::ng-deep 组合器，则样式可能会渗透到其他组件中。

注意：即使::ng-deep已弃用，也未指定何时将其删除，因为目前没有其他选择。

于 2019-10-12T14:23:42.473 回答