Angular 在同一页上显示不同的视图

我在我的

Ionic2

项目上有一个页面，我想在用户按下按钮时显示其他内容，我用

booleans

制作了它，我不确定这是否是一个好的方法。。。我的

.html

上有大量的

*ngIf

，所以我想知道在不创建另一个页面的情况下更改视图的更好方法是什么，只更改

.html

代码，你能给我举个例子吗

我过去习惯于使用布尔型，但现在，我面对的是，我的

、

和

上都有组件，我不想在每个组件上都做

*ngIf

我使用的是>=

Angular2

和>=

Ionic2

有些代码，我没有把我所有的代码都放进去，因为它非常大，所以我或多或少地把代码的结构放进去：

  <ion-header>
  <ion-navbar>
    <ion-title *ngIf="view1">{{title}}</ion-title>
  </ion-navbar>
 <p *ngIf="view1">SomeMoreStuff</p>

</ion-header>

<!-- view 1 -->

  <div *ngIf="view1">
      <!-- more stuff -->
  </div>


</ion-content>
<ion-footer *ngIf="view1">

</ion-footer>

{{title}}

---

现在我有另一个名为

view2

的

boolean

来显示不同的

页脚

，

离子标题

，等等。

将整个视图包装在一个容器中

<ng-container *ngIf="view == 'view1'">
 <!-- view 1 goes here -->
<ng-container>

<ng-container *ngIf="view == 'view2'">
 <!-- view 2 goes here -->
<ng-container>

---

如果您在不同视图之间共享了零件，请将它们保留在

之外，或者将它们移动到可重用组件中，并在需要时添加它们。

请显示代码，说明您尝试完成的内容、尝试的内容以及失败的地方。这听起来像是2

*ngIf

应该做的，但从你提供的信息很难判断。@GünterZöchbauer编辑过……一般来说，这听起来是一个正确的方法。您还可以为页眉、内容和页脚创建单独的组件。但正如Günter Zöchbauer所说，很难用代码示例来判断。我建议为页眉、内容和页脚创建单独的、可重用的组件。然后您可以将视图标识符作为@Input属性传递。我将只使用一个变量来控制应显示的视图，并使用

*ngIf=“view1”

和

*ngIf=“！view1”

。如果您不想在每个组件上添加

*ngIf

，请使用

..

包装整个视图（第二个视图中的附加

！

表示“不”），并将各自视图的全部内容放在这两个容器中。那么您只有2个

*ngIf

。