记录ionic的一些坑(EventEmitter）

最新推荐文章于 2024-03-22 09:45:09 发布

原创最新推荐文章于 2024-03-22 09:45:09 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

博主分享用Angular + Ionic4开发APP时遇到的问题。APP首次运行，第一次触发事件失败，点击元素触发事件第一次无id值，后续正常。建立事件驱动服务，在页面绑定触发、目标页面监听事件广播，最终用可靠的路由参数extras对象解决问题。

前段时间用angular +ionic4开发APP，遇到一些度娘都难以搜索到的问题，特此分享，只为后来人节约时间。

ionic事件驱动EventEmitter：

APP首次运行时，第一次触发事件失败。

1.首先，建立一个事件驱动服务 app/services/event.service.ts,注入根，全局使用。

import { Injectable} from '@angular/core';
import { EventEmitter } from 'events';

@Injectable({
  providedIn: 'root'
})
export class EventService {

  event: EventEmitter;

  constructor() {
    this.event = new EventEmitter();
  }

  emit(eventKey: string, ...args: any[]) {
    this.event.emit(eventKey, args);
  }
  
  addListener(eventKey: string, handler: (...args: any[]) => void) {
    this.event.addListener(eventKey, handler);
  }
}

2.在页面绑定事件函数触发发送事件

toPageB(item){
    this.eventService.event.emit('navigateToPageB',item.id);
}

3.在目标页面监听事件广播

this.eventService.event.on('navigateToPageB', (id) => {
      console.log(id)
    });

4.发现当APP加载完毕时，第一次点击元素触发事件，并不会获得id值，而第二次及以后都能触发。

解决方案：用可靠的路由参数extras对象。

//pageA带参数跳转
toPageB(item){
    this.navigateService.navigate('/pageB', { data: item.id});
}
//pageB接收参数
ngOnInit(){
    this.extras = this.route.getCurrentNavigation().extras;
    consloe.log(this.extras.data)
}