我正在使用"@ionic/angular": "^4.11.10"
我正在尝试根据是否发出事件来显示 中的选项卡。我有一个用于条件渲染。代码如下:ion-tabsion-tab-bar*ngIf
<ion-tabs color="danger">
<ion-tab-bar class="tab-bar" slot="bottom">
<ion-tab-button *ngIf="!registerClicked" tab="tab1">
<ion-icon name="thumbs-up"></ion-icon>
<ion-label>{{'Transfer' | translate}}</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="gift"></ion-icon>
<ion-label>{{'Perks' | translate}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
<ion-tabs>
下面是事件发射器:
import { Events } from '@ionic/angular';
export class LoginModalPage
constructor(
public event:Events
) { }
public login() {
this.event.publish('registerClicked', false);
}
}
同样,还有另一个函数将寄存器单击设置为 true:
import { Events } from '@ionic/angular';
export class RegisterModalPage
constructor(
public event:Events
) { }
public register() {
this.event.publish('registerClicked', true);
}
}
并在选项卡的代码后面,
import { Events } from '@ionic/angular';
export class TabsPage {
public registerClicked:boolean;
constructor(
public event: Events
) {
this.event.subscribe('registerClicked', (data) =>{
this.registerClicked = data;
});
}
}
现在,当我运行localhost:4200时,代码按预期工作,当按钮单击时调用登录函数时显示,当我单击执行该函数的按钮时,选项卡不可见。但是,当我构建apk并在设备上进行测试时,这不起作用。任何人都可以提供任何见解来实现这一目标吗?tab1register()
慕桂英546537
相关分类