我用的是 "@ionic/angular": "^4.11.10"
我正试图在 ion-tabs
在 ion-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);
}
}
同样,还有一个函数将registerClicked设置为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时,这段代码就像预期的那样工作了。tab1
在点击按钮时调用登录功能时显示,而当我点击按钮执行 register()
功能。然而,当我建立一个apk,并在设备上测试时,这并不工作。有谁能提供解决这个问题的方法吗?
为了更新数据从一个页面到另一个页面,我们使用了事件库,但事件在ionic 5中不再可用。
ionic generate service events // this will create events provider
复制粘贴blow代码.
import { Injectable } from '@angular/core';
import {Subject} from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class EventsService {
private fooSubject = new Subject<any>();
constructor() { }
publishLogin(data: any) {
this.fooSubject.next(data);
}
receiveLogin(): Subject<any> {
return this.fooSubject;
}
}
从A页:导入你的服务在构造函数中初始化它/。
constructor(public events: EventsService){}
并发布事件,例如
this.events.publishLogin(yourDataVariable);
在B页中接收:导入你的服务在构造函数中初始化它/。
constructor(public events: EventsService){}
this.events.receiveLogin().subscribe((res:any)=>{
console.log(res);
})