Angularjs一个组件多个视图（Html + css）

Question

我需要弄清楚如何为组件提供不同的视图（html + css）。很多人说最好为每个视图分别拥有多个组件，然后使用服务进行交互，但我的情况如下： 我有一个控制器，其视图基本上是一个布局。假设我的布局在顶部有3个窗格，在底部有一个窗格。现在我在视图中有一个按钮，将布局更改为顶部的两个窗格和底部的两个窗格。所以基本上我的数据不会改变。它只是html和css的变化。 如果第一个布局填充了一些数据，我不想更改它或在更改布局时重新初始化它，因为更改只是布局上的更改而不是数据。

我很难弄清楚如何在angular2中实现这一目标。有任何想法吗？

Answer 1

所以你想添加html和css或者只是改变实际模板吗？

如果您只想更改实际的html，我个人建议您使用状态而不是不同的视图。并根据状态移动html。我自己也有同样的问题，我通过重新思考布局解决了这个问题，最终找到了一个更简单的布局结构。

希望这会有所帮助。 享受编码。

Answer 2

您可以在一个模板中拥有两个视图，并通过设置平面来切换它们：

<div *ngIf="firstLayout">
  <!-- first layout -->
</div>
<div *ngIf="!firstLayout">
  <!-- first layout -->
</div>