Angularjs一个组件多个视图(Html+css)

Question

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

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

Answer 1

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

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

Answer 2

所以您想添加 html 和 css 还是只是更改实际模板？

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

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