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

对不起，伙计们。我不能很好地提出这个问题，因为这个问题本身非常棘手。我有一个

月份选择器

，在它上面我有一个

时间选择器

小部件。所以这里的月份选择器是timeselector组件的子组件。请参见此屏幕截图： 点击

日历图标

小部件弹出。你可以看到，在时间选择器中，我给月份选择器打了两次电话。第一次用于当前

年度迄今

，第二次用于上一年度迄今。您还可以看到一个比较这两者的

开关。现在我的任务是将第二个月的选择器框变成红色，或者在开关关闭时将其禁用。我现在给你看代码

timeselector.component.html（*请忽略标记名，因为它们是定制的）

timeselector.component.css

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

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

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

.iamDisabled {
    color: red !important;
}

.iamDisabled {
  background-color: whitesmoke;
  opacity: 0.3;
  pointer-events: none !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>


{{lboundMonth}}-{{lboundYear}

{{uboundMonth}}-{{uboundYear}


显然，如果我在monthpickcr源代码中应用css。它将应用于组件调用（上限和下限）。
请告诉我在这种情况下我该怎么办。我想禁用，或者说，当开关关闭时，只需将第二个monthpicker字体颜色设置为红色
 我正在分享一个解决方案。我们不能说这是一个正确的解决方案，你可以说这是一个快速修复（*不推荐）

将背景色设置为灰白色，使其看起来像某种覆盖
设置不透明度，使其不会隐藏整个字段
禁用悬停效果，这样月份选择器就不会出现
timeselector.component.css

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

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

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

.iamDisabled {
    color: red !important;
}

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

请随意分享更好的解决方案