父可重用组件:(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;
}
}
所以在这里,在我当前的组件中,我使用的是设置面板组件。因此,每当父组件中存在父 div 中的隐藏属性
时,我需要将父按钮背景更改为红色。如果不是,我需要将父按钮的背景更改为绿色吗?为此,我对当前组件进行了更改!
我怎样才能做到这一点?
我想过这样做,但是这个语法是错误的
//所以当div被隐藏时,我需要让按钮背景改变
:host ::ng-deep app-settings-panel div.settings-panel[hidden]{
:host ::ng-deep app-settings-panel button {
background:red;
}
}
如果需要更多解释,请提出建议,以便我编辑得更清楚。
如有任何帮助,我们将不胜感激!
最佳答案
编辑:
在你的中断组件中,只需修改你现有的scss
: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;
}
}
只需使用 host
在你的子组件中
在父组件中,设置一个 open
在 <app-settings-panel
某处上课当 div 打开时
然后在子组件中你可以这样设置按钮的样式
:host(.open) ::ng-deep button
{
background-color: blue;
}
关于javascript - 如何使用 scss 根据隐藏属性更改样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49334307/