不显示任何不适用于角度导航栏
我在许多页面/组件上都使用css样式(显示:无)。除导航栏外,其他任何地方都可以正常使用 (注意:对于任何想知道我为什么使用显示的人:无,我正在用它来翻译i18n中的插值项 由于有此注释,还请记住,我想隐藏但保留在其内部以保留价值。
有人可以帮助我理解为什么它在这个地方不起作用吗?
CSS:
.column-left {
padding: 2rem;
background-color: #3d8fcd;
box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2); }
.column-right {
background-color: #fff; }
@media screen and (min-width: 960px) {
.main-content-container {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: stretch;
min-height: 100%; }
.main-content-container .column-left {
width: 30%;
max-width: 30rem;
flex-shrink: 0;
z-index: 1; }
.main-content-container .column-right {
flex: 1 1;
background-color: #fff; } }
.hide-element {
display: none;
}
HTML:
<div class="main-content-container">
<div class="column-left">
<input placeholder="Nav" id="hinh" i18n-value="@@SoMeThIn_A1_1" value="Home" [class.hide-element]="true">
<input placeholder="Nav" id="hinma" i18n-value="@@SoMeThIn_A1_2" value="My Account" [class.hide-element]="true">
<app-navigation-column [nav-buttons]="navButtons" (clicked)="navigationColumn_click($event)" class="patient-nav">
</app-navigation-column>
</div>
<div class="column-right" [@routerTransition]="getState(ot)">
<router-outlet #ot="outlet"></router-outlet>
</div>
</div>
我尝试过:
display: none !important;
[style.display]="'none'"
[style.visibility]="'hidden'"
[hidden]="hideElement"
[style.display]="hideElement?'none':'inherit'">
答案 0 :(得分:1)
在您的伴奏上尝试一下:
[hidden]="true"