选择是使用离子和角度框架显示一个组件还是另一个组件

问题描述

我正在开发一个带有 ionic 和 angular 的应用程序。在一个特定页面中，我在 ion-content 中添加了一个组件，但是现在我想选择在单击按钮时显示另一个组件。我一直在寻找一种选择，但我无法找到如何去做。这是我的实际代码：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button (click)="changeComponent()" color="primary">
        <ion-icon name="copy-outline"></ion-icon>
      </ion-button>
    </ion-buttons>    
  </ion-toolbar>
</ion-header>

<ion-content>
 <app-blockly></app-blockly>
</ion-content>

我想要做的是在 ion-content 中添加另一个名为 app-dual-blockly 的组件，只有当我单击 changeComponent 按钮并隐藏实际的 app-blocky 时才能看到该组件。

非常感谢。

解决方法

定义您的布尔属性以显示或不显示组件：

public showComponentA = false;
public showComponentB = false;

点击按钮时，切换动作

changeComponent() {
    this.showComponentA = !this.showComponentA;
}

changeComponentB() {...}

在这种情况下，您可以轻松地使用 *NgIf

<ion-content>
 <app-blockly *ngIf="showComponentA"></app-blockly>
 <another-component *ngIf="showComponentB"></another-component>
</ion-content>

如果事情增长，您可以选择 Angular Router 或使用 switchStatement。 对于只有两个组件，这应该可以解决问题。

https://angular.io/api/common/NgSwitch