在 angular2 中覆盖 child div 的 CSS-Property

Question

目前我在我网站的 GUI 中使用 ng2-bootstrap 的 progressbar。我在这一步中使用的 HTML 非常简单：

  <div class="col-lg-8 col-md-4">
    <progressbar  max="100" class="progress-striped" [value]="progress">{{progress}}%</progressbar>
  </div>

这将呈现为以下 HTML：

<div class="col-lg-8 col-md-4">
    <progressbar class="progress-striped" max="100">
        <div progress="" max="100" class="progress" style="height: 30px;">
            <bar>
                <div aria-valuemin="0" class="progress-bar" role="progressbar" style="min-width: 0px; width: 0%;" ng-reflect-initial-classes="progress-bar" aria-valuenow="0" aria-valuetext="0%">
                    0%
                </div>
            </bar>


        </div>
    </progressbar>
</div>

我删除了一些 angular 指令以提高可读性

进度条的高度设置在css-class进度中的第二个div，我无法访问，因为它是在提供的组件源代码中设置的。如果我想更改 font-size.

，最里面的 div 也是我需要访问的那个

我试图覆盖 parent 中的样式来设置高度，但进度 class 更具体，因此我无法覆盖它。

我找到了一个不太漂亮的解决方案，它使用 ElementRef 和 Renderer，但是这种扩展非常糟糕，如果有多个 progressbars（ATM，我正在尝试访问第二个进度条):

  ngAfterViewInit() {
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div'), 'height', '30px');
    this.renderer.setElementStyle(this.el.nativeElement.querySelector('progressbar').querySelector('div').querySelector('bar').querySelector('div'), 'font-size', '15px');
  }

有没有更好的方法来解决这个问题？作为最后的手段，我可以尝试调整组件的源代码以访问这两个值，但实际上我想避免这种情况。

Answer 1

您提到特异性是问题所在。如果是这种情况，使用 !important 是一种解决方案。任何标有 !important 的内容都将获得最高特异性，并且不能被任何其他非 !important CSS 规则或内联样式覆盖。当放入您的 global.css 文件时，这应该适用于所有进度条。由于视图封装，它可能无法在您的 component.css 中工作。

progressbar > div[progress] {
  height: 30px !important;
}

progressbar > div[progress] > bar > .progress-bar {
  font-size: 15px !important;
}

在 angular2 中覆盖 child div 的 CSS-Property

Override CSS-Property of child div in angular2

html

css

typescript

ng2-bootstrap

angular