Question

父可重用组件：（settings-panel.component.html）

<button>
    <app-svg-icon [iconSrc]="iconSrc"></app-svg-icon>
</button>
<div [ngClass]="position" class="settings-panel" [hidden]="!panelIsVisible">
    <span class="arrow"></span>
    <ng-content></ng-content>
</div>

这是我当前的组件（outage.component.html）

 <app-settings-panel class="outage-main" iconPath="alert.svg" position="right bottom">
     <div class="outage-panel">
        <div class="outage-heading">
            <span>Notifications</span>
            <span>New</span>
        </div>      
        <span *ngFor="let outage of outageArray">
            <button type="button" class="outage-group-item">
                <span>{{outage}}</span>
            </button>
        </span>
     </div>
 </app-settings-panel>

这是我当前的组件scss（outage.component.scss）

   :host ::ng-deep app-settings-panel {

        div.settings-panel {
            right:-1px !important;
            top:none !important;
        }

        button{  
            background: #152935!important;      
            padding: 12px !important;
        }
     }

所以在这里，在我当前的组件中，我正在使用settings-panel组件。因此，只要在父组件中存在父div中的hidden attribute，我就需要将父按钮背景更改为红色。如果没有，我需要将父按钮的背景更改为绿色？我已经对当前组件进行了更改以执行此操作！

我怎样才能实现这个目标？

我想这样做，但这种语法错了

//所以当隐藏div时，我需要进行按钮背景更改

:host ::ng-deep app-settings-panel div.settings-panel[hidden]{   
    :host ::ng-deep app-settings-panel button {
        background:red;
    }
}

如果需要更多解释，请建议我可以更清楚地编辑。

任何帮助将不胜感激！

Answer 1

修改

在您的停机组件中，只需修改现有的scss
即可
(90, 180, 0)

在您的子组件中使用:host ::ng-deep app-settings-panel { div.settings-panel { right:-1px !important; top:none !important; &[hidden] button //Add this rule { background-color: red; } } button{ background: #152935!important; padding: 12px !important; } }

从div组件中，当div打开时，在host的某处设置open类

然后在子组件中，您可以像这样设置按钮

<app-settings-panel

如何使用scss根据隐藏属性更改样式？

1 个答案: