Не отображать ни один не работает для угловой Navbar (но работает для других компонентов)

Question

дисплей не работает для угловой навигационной панели

У меня есть стиль CSS (дисплей: нет), который я использую на многих своих страницах / компонентах.Он работает хорошо везде, кроме навигационной панели (Примечание: для всех, кто интересуется, почему я использую display: none, я использую это для перевода интерполированных элементов в 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'">

Answer 1

Попробуйте это на своем компьютере:

[hidden]="true"