繁体   English   中英

Ionic 4 事件在设备中不起作用但在浏览器中起作用

[英]Ionic 4 Events not working in device but working on browser

我正在使用"@ionic/angular": "^4.11.10"

我正在尝试在ion-tab-barion-tabs中显示选项卡,具体取决于是否发出事件。 我有一个*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);
  }
}

同样,还有另一个 function 将 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 时按预期工作,当单击按钮时调用登录 function 时显示tab1 ,当我单击执行register() function 的按钮时选项卡不可见。 但是,当我构建一个 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);
      })

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM