如何在父[Angular]

Question

对不起。我无法很好地提出问题，因为问题本身非常棘手。我有一个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字体颜色变成红色。

Answer 1

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

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

timeselector.component.css

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

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