选择是否使用 ionic 和 angular 框架显示一个组件或另一个组件

Question

我正在使用 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 时才能看到它。

非常感谢。

Answer 1

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

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 路由器或使用 switchStatement。对于只有两个组件，这应该可以解决问题。

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

选择是否使用 ionic 和 angular 框架显示一个组件或另一个组件

Choose whether to show one component or another with ionic and angular framework

web-component

blockly

ionic-framework

angular-components

angular