javascript - Ionic 4 事件在设备中不起作用但在浏览器中起作用
问题描述
我在用着"@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
复制粘贴打击代码。
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);
})
推荐阅读
- python - 如何在 Python Pillow 中设置字体的字距?
- emacs - 书签文件无法保存在 Emacs 中
- python - 尝试将数据拟合到 SARIMA 时,Nonetype 对象不可迭代
- java - 如何从相应的 xsd'S 获取自己的 xml 编辑器的信息?
- python - 如何将两个图像序列应用于模型的输入?
- c# - 为什么 MonoDevelop 和 Unity3D 不知道 Application.LoadLevel();?
- typescript - 打字稿如何键入一个代理它的道具并注入一个道具
- python - jax vmap:强制执行正确的形状
- github - 如何在不更改任何字母的情况下更改我的 github 用户名的大小写?
- python - 如何设置环境变量以使其指向系统python?