ionic4 tabs跳转不触发生命周期解决方案

被ionic4的路由跳转折磨了很久,试过很多土办法,总是不能完美的解决。
后来在博客内看到有朋友提供了一个解决方案,但是发现ios的右滑返回会报错
示例

  ionViewWillEnter() {
    const activateComponent = this.tabs.outlet.component;
    if (activateComponent instanceof HomePage) {
      // 调用页面方法
      activateComponent.getSlides();
    }
  }

右滑返回会出现:

ERROR Error: Outlet is not activated

被折磨许久后想到了个投机的方法,方案如下:

在app.module.ts提供Events

示例

	@NgModule({
	  imports: [],
	  declarations: [AppComponent],
	  providers: [Events],
	  bootstrap: [AppComponent]
	})

在tabs生命周期内注册router监听,当路径为tabs时使用events发送广播到各tabs页面进行接收

尽量保证其他页面最后的路径名不要和tab的路径名重复
示例

  constructor(private router: Router,
              private events: Events) {
    this.routerListener();
  }

  /**
   * 监听路由变化
   */
  routerListener() {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd))
      .subscribe((e: NavigationEnd) => {
        const url = e.url;
        const fi = url.lastIndexOf('/') + 1;
        const li = url.indexOf('?') > -1 ? url.indexOf('?') : url.length;
        const tabName = url.substring(fi, li);
        const tabObj = {
          home: true,
          live: true,
          cart: true,
          mine: true
        };
        if (tabObj[tabName]) {
          for (const key in tabObj) {
            if (tabName === key) {
              this.events.publish(tabName, true);
            }
          }
        }
      });
  }

在各tabs页面进行接收广播

示例

  constructor(private statusBar: StatusBar,
              private events: Events) {
    // 防止多次订阅
    this.events.unsubscribe('home'); 
    this.events.subscribe('home', async v => {
      if (v) {
        this.statusBar.overlaysWebView(true);
        this.statusBar.styleLightContent();
      }
    });
  }

这样不管是ios右滑返回还是其他操作都没问题了,算是个比较完美的解决方案

你可能感兴趣的:(IONIC4,使用问题集锦)