使用 Bootstrap 时，Angular 组件不透明度不再起作用

Question

在我的 Angular 应用程序中，我有两个组件，A 和 B，第一个是切换按钮，第二个是表单。 B 组件使用服务订阅 A 组件的状态，以便根据观察到的切换状态设置其 CSS。例如，如果 A 组件设置为状态“leftPressed”，则组件 B 对此状态做出反应，将其自己的 CSS 设置为“启用”（通过 [ngStyle]）以使用户可以使用表单，而不是如果A 组件设置为“rightPressed”状态，B 组件将其自己的 CSS 设置为“禁用”。这是 CSS 禁用样式的代码：

.disable {
  opacity: 30%;
  pointer-events: none;
} 

此策略将使表单变得不透明，并使用户无法点击相同的表单。 我的问题是这个东西一直有效，直到我在我的项目中引入 Bootstrap 以使我的应用程序更具响应性（我刚刚根据 Bootstrap 操作方式将这两个按钮放在 div-row-col 方案中），但是奇怪的是是只有不透明度在 B 组件上不起作用，但“鼠标事件：无”按预期工作。

在这种情况下，CSS 怎么可能被部分估价？我唯一知道的是，如果我在没有引导代码的情况下回滚将这些组件放入以前的 HTML 中，一切正常。

更新更多代码：

这是我的 HTML 组件的代码，其中声明了更多组件

<!--This is the bar without Bootstrap that works-->
<div class="searchBar">
  <app-button-search-city-polygon-component></app-button-search-city-polygon-component>
  <app-search-city-bar [ngClass]="[cityBarStyle]"></app-search-city-bar>
  <app-clear-polygon-bar [ngClass]="[polygonBarStyle]"></app-clear-polygon-bar>
  <app-button-search-centers-or-operators></app-button-search-centers-or-operators>
  <app-validate-and-search-button></app-validate-and-search-button>
</div>

<!--This is the bar developed using Bootstrap and the CSS opacity DOES NOT WORK on the component 'app-search-city-bar'-->
<div class="searchBar row align-content-lg-center">

  <div class="col-lg-1">

  </div>

  <div class="col-lg-2">
    <app-button-search-city-polygon-component></app-button-search-city-polygon-component>
  </div>

  <div class="col-lg-4">
    <app-search-city-bar [ngClass]="[cityBarStyle]"></app-search-city-bar>
  </div>

  <div class="col-lg-1">
    <app-clear-polygon-bar [ngClass]="[polygonBarStyle]"></app-clear-polygon-bar>
  </div>

  <div class="col-lg-2">
    <app-button-search-centers-or-operators></app-button-search-centers-or-operators>
  </div>

  <div class="col-lg-1">
    <app-validate-and-search-button></app-validate-and-search-button>
  </div>

  <div class="col-lg-1">

  </div>

</div>

这是该组件的 CSS：

.searchBar {
  background-color: #eeeeee;
  padding-top: 15px;
  display: flex;
  justify-content: center;
}

.cityBarDisabled {
  opacity: 30%;
  pointer-events: none;
}

.polygonBarDisabled {
  opacity: 30%;
  pointer-events: none;
}

.cityBarEnabled {

}

.polygonBarEnabled {

}

这是 TS 代码：

import {AfterViewInit, Component, OnInit} from '@angular/core';
import {Subscription} from 'rxjs';
import {ToggleCityPolygonService} from '../../_service/toggleCityPolygonService/toggle-city-polygon.service';

@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.component.html',
  styleUrls: ['./search-bar.component.css']
})
export class SearchBarComponent implements OnInit {

  state = '';

  cityBarStyle = '';
  polygonBarStyle: '';

  constructor(private toggleCityPolygonService: ToggleCityPolygonService) {

  }

  ngOnInit(): void {
    this.toggleCityPolygonService.getCityPolygonStateObs().subscribe(v => {this.state = v[''];
    // console.log('i\'m gettin value: ' + v);
    if (v === 'searchByCity') {
      // @ts-ignore
      this.polygonBarStyle = 'polygonBarDisabled';
      this.cityBarStyle = 'cityBarEnabled';
    } else {
      if (v === 'searchByPolygon'){
        this.cityBarStyle = 'cityBarDisabled';
        // @ts-ignore
        this.polygonBarStyle = 'polygonBarEnabled';
      }
    }
    })
  }

}

“toggleCityPolygonService”是保存“cityPolygonState”的服务，当用户单击只能假设两种状态的相对切换按钮时，“cityPolygonState”会在两个值之间变化：“searchByCity”和“searchByPolygon”

Answer 1

不透明度取值 0.1 - 1。尝试将不透明度：30% 更改为不透明度：0.3； https://www.w3schools.com/css/css_image_transparency.asp

Answer 2

这不是 Bootstrap 引起的问题。这是因为生产版本中的 css 优化器 (cssnano)。

为避免这种情况，您可以使用 0 到 1 之间的值。 在您的情况下，您可以使用 0.3 而不是 30%。

opacity: 0.3; // opacity: 30%;

MDN guild on opacity 问题报告于GitHub