html - 如何在父 [Angular] 中两次调用的子组件上动态应用 CSS

Question

对不起各位。我无法很好地提出问题，因为问题本身非常棘手。我有一个 month-picker 并且在它之上我有一个 time-selector 小部件。所以这里的月份选择器是时间选择器组件的子组件。请参阅此屏幕截图: 单击 calendar-icon 小部件弹出。您可以看到在时间选择器中我调用了月份选择器两次。第一次是当前 Year-to-Date，第二次是 Previous year-to-date。您还可以看到两者之间的 Comparing 开关。现在我的任务是将第二个月选择器框变成红色，或者在开关关闭时将其禁用。我现在将向您展示代码。

timeselector.component.html(*请忽略标签名称，因为它们是定制的)

...
<combobox></combobox>
<app-monthpicker></app-monthpicker>

<toggle-switch (onChange)="handleChange($event)" [(ngModel)]="toggle"></toggle-switch>

<combobox></combobox>
<app-monthpicker [class.iamDisabled]="isDisabled"></app-monthpicker>
...

timeselector.component.ts

import { Component } from '@angular/core';

@Component({
    ...
})
export class TimeselectorComponent {
    isDisabled=false;

    handleChange(e) {
         this.isDisabled = !this.isDisabled;
     }
}

timeselector.component.css

.iamDisabled {
    color: red !important;
}

但即使开关关闭，我也没有在第二个月选择器上获得任何设计。我还想向您展示月份选择器的代码。

monthpicker.component.html

<div class="dropdown">
  <span>
    <div class="range-box">
      <p>{{ lboundMonth }}-{{ lboundYear }}</p>
      <p>{{ uboundMonth }}-{{ uboundYear }}</p>
    </div>
  </span>
  <div class="my-table-div dropdown-content">
    <div class="year-div">
      <!-- Displaying years and months here-->
    </div>
  </div>
</div>

很明显，如果我在 monthpickcr 源代码中应用 css。它将应用于组件调用(上层和下层)。 请告诉我在这种情况下我该怎么办。我想禁用或者说只是在开关关闭时将第二个 monthpicker 字体颜色变为红色。

Answer 1

我正在分享一个解决方案。我们不能说这是一个合适的解决方案，您可以说这是一个快速解决方案(*不推荐)。

1. 将背景颜色设置为灰白色，使其看起来像一些叠加层。
2. 设置不透明度，使其不会隐藏整个字段。
3. 禁用悬停效果，这样月份选择器就不会出现。

timeselector.component.css

.iamDisabled {
  background-color: whitesmoke;
  opacity: 0.3;
  pointer-events: none !important;
}

请随时分享更好的解决方案。