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 更改布局时，子组件将被销毁并生成一个新组件。我想要拥有相同的实例，并且不要丢失子组件的重要信息并避免一些 a​​pi 调用。

有没有什么方法可以实现子组件不会被破坏，或者有没有比 ngIf 更好的方法？

我只需要一个子组件实例来实现父组件中的不同布局。

Answer 1

使用 [hidden] 属性代替相反的逻辑，它将防止元素被破坏。

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

我隐藏只是通过更改显示样式来隐藏/显示带有 css 的 DOM 元素