Ionic 4事件不能在设备中工作,但在浏览器上工作

我正在使用"@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()


UYOU
浏览 95回答 1
1回答

慕桂英546537

为了将数据从一个页面更新到另一个页面,我们使用了事件库。但是事件在离子5中不再可用。打击是解决方案。运行命令:ionic generate service events&nbsp; &nbsp; &nbsp; &nbsp; // this will create events provider复制粘贴吹塑代码。import { Injectable } from '@angular/core';import {Subject} from 'rxjs';@Injectable({&nbsp; providedIn: 'root'})export class EventsService {private fooSubject = new Subject<any>();constructor() { }&nbsp; &nbsp; publishLogin(data: any) {&nbsp; &nbsp; &nbsp; &nbsp; this.fooSubject.next(data);&nbsp; &nbsp; }&nbsp; &nbsp; receiveLogin(): Subject<any> {&nbsp; &nbsp; &nbsp; &nbsp; return this.fooSubject;&nbsp; &nbsp; }}从页面 A:导入您的服务,在构造函数 // 中初始化它constructor(public events: EventsService){}并发布事件 例如&nbsp;this.events.publishLogin(yourDataVariable);在页面 B 中接收它:导入您的服务,在构造函数 // 中初始化它&nbsp; &nbsp; constructor(public events: EventsService){}this.events.receiveLogin().subscribe((res:any)=>{&nbsp; &nbsp; &nbsp; &nbsp; console.log(res);&nbsp; &nbsp; &nbsp; })
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript