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

【问题标题】：Choose whether to show one component or another with ionic and angular framework选择是否使用离子和角度框架显示一个组件或另一个组件
【发布时间】：2021-04-23 15:52:59
【问题描述】：

我正在开发一个具有离子和角度的应用程序。在一个特定页面中，我将一个组件添加到 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>

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

非常感谢。

【问题讨论】：

标签： angular ionic-framework web-component angular-components blockly

【解决方案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

【讨论】：

非常感谢。就像你说的那样，它对我很有效