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>

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

角度6-多个子组件应属于同一实例

1 个答案: