Ionic 4 事件在设备上不起作用,但在浏览器上起作用 [英] Ionic 4 Events not working in device but working on browser
问题描述
我正在使用 "@ionic/angular": "^4.11.10"
我试图在 ion-tab-bar
中的 ion-tabs
中显示标签,这取决于是否发出了事件.我有一个用于条件渲染的 *ngIf
.代码如下:
I'm trying to display the tabs in ion-tabs
in ion-tab-bar
depending on whether an event was emitted. I have an *ngIf
for conditional rendering. Here's the code:
<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:
Similarly, there is another function that sets registerClicked to 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 并在设备上对其进行测试时,这不起作用.任何人都可以提供有关完成此操作的任何见解吗?
Now the code is working as expected when I run localhost:4200, the tab1
is displayed when the login function is called on button click and the tab is not visible when I click a button that executes the register()
function. However when I build an apk, and test it on a device, this doesn't work. Can anyone provide any insight into accomplishing this?
推荐答案
为了将数据从一页更新到另一页,我们使用了事件库.但是事件在ionic 5中不再可用.打击就是解决办法.运行命令:
To update Data from one page to other we used Events library. but events are no longer available in ionic 5. blow is the solution. run command:
ionic generate service events // this will create events provider
复制粘贴代码.
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:导入您的服务在构造函数中初始化它//
From Page A: import your service initialize it in constructor //
constructor(public events: EventsService){}
并发布事件例如
this.events.publishLogin(yourDataVariable);
在页面 B 接收:导入您的服务在构造函数中初始化它//
Receive it in Page B: import your service initialize it in constructor //
constructor(public events: EventsService){}
this.events.receiveLogin().subscribe((res:any)=>{
console.log(res);
})
这篇关于Ionic 4 事件在设备上不起作用,但在浏览器上起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!