[英]Choose whether to show one component or another with ionic and angular framework
I am developing an app with ionic and angular.我正在开发一个带有离子和 angular 的应用程序。 In one specific page I added a component into the ion-content, however now I want to choose to display another one when I click a button.
在一个特定页面中,我将一个组件添加到 ion-content 中,但是现在我想选择在单击按钮时显示另一个组件。 I have been looking for an option but it has been imposible for me to find how to do it.
我一直在寻找一个选项,但我无法找到如何去做。 This is my actual code:
这是我的实际代码:
<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>
What I want to do is to add in the ion-content another component called app-dual-blockly that has to be seen only when I click the changeComponent button and hide the actual app-blocky.我想要做的是在离子内容中添加另一个名为 app-dual-blockly 的组件,只有当我单击 changeComponent 按钮并隐藏实际的 app-blocky 时才能看到它。
Thank you very much.非常感谢。
define your boolean properties to show components or not:定义您的 boolean 属性以显示或不显示组件:
public showComponentA = false;
public showComponentB = false;
When clicking the button, toggle the action单击按钮时,切换操作
changeComponent() {
this.showComponentA = !this.showComponentA;
}
changeComponentB() {...}
In this case, you can easily work with * NgIf在这种情况下,您可以轻松地使用 * NgIf
<ion-content>
<app-blockly *ngIf="showComponentA"></app-blockly>
<another-component *ngIf="showComponentB"></another-component>
</ion-content>
If things grow, you can either choose a Angular Router or use a switchStatement.如果事情发展,您可以选择 Angular 路由器或使用 switchStatement。 For only two Components, this should do the trick.
只有两个组件,这应该可以解决问题。
https://angular.io/api/common/NgSwitch https://angular.io/api/common/NgSwitch
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.