Angular 6 - несколько дочерних компонентов должны быть одного экземпляра

Question

Я упростил мою проблему:

<div *ngIf="layout1" class="layout1">
  <div class="sidebar-layout1">
     some items
  </div>
  <child-component [something]="sth"></child-component>
</div>
<div *ngIf="!layout1" class="layout2">
  <child-component [something]="sth">
    <p>some content...</p>
  </child-component>
</div>

У меня есть родительский компонент, который имеет возможность нормальной компоновки (layout1) и полноэкранной компоновки (layout2) (в полноэкранном режиме дочерний компонент должен бытьна весь экран).Проблема в том, что когда я меняю компоновку с помощью * ngIf, дочерний компонент уничтожается и генерируется новый.Я хочу иметь тот же экземпляр и не терять важную информацию о дочернем компоненте и избегать некоторых вызовов API.

Есть ли способ добиться того, чтобы дочерний компонент не был уничтожен или лучшечем ngIf?

Мне просто нужен один экземпляр дочернего компонента для разных макетов родительского компонента.

Answer 1

Вместо этого используйте атрибут [hidden] с обратной логикой, это предотвратит уничтожение элемента.

<div [hidden]="!layout1" class="layout1">
...
</div>
<div [hidden]="layout1" class="layout2">
...
</div>

Я скрыл, просто скрывает / показывает элемент DOM с помощью css, изменяя стиль отображения