Question

目前，我在网站的GUI中使用ng2-bootstrap <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>

这将呈现为以下HTML：

div

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

进度条的高度是在css级进度中的第二个div中设置的，我无法访问它，因为它是在提供的组件源代码中设置的。如果我想更改字体大小，最里面的ElementRef是我需要访问的。{/ p>

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

我找到了一个使用Renderer和progressbars的不太漂亮的解决方案，但是如果有多个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'); }（我试图访问的是ATM），这会非常糟糕并且会变得混乱第二个进度条）：

public void countDigits(int num) {      
    int count=0;
    String numF = String.valueOf(num);

    for (int j = 0; j <= 9; j++) {
        count=0;
        for (i = 0; i <numF.length(); i++) {
            char c = numF.charAt(i);
            String number=String.valueOf(j);
            if (c == number.charAt(0)) {
                count++;
            }
        }
        System.out.println("The number " + j + " appaeared " + count + " times in 347213");

    }
}

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

Answer 1

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

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

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

在angular2

1 个答案: