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

对不起大家。我无法很好地提出问题，因为问题本身非常棘手。我有一个month-picker，最上面有一个time-selector小部件。因此，这里的月选择器是timeselector组件的子代。查看此屏幕截图：
单击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字体颜色变成红色。

最佳答案

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


将背景颜色设置为白色以外的颜色，使其看起来像一些叠加层。
设置不透明度，使其不隐藏整个字段。
禁用悬停效果，以免出现月份选择器。


timeselector.component.css

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

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