来荐app申请开店点击个人申请开店通过路由跳转到选址大厅，然后在点返回，路由多次回调问题处理

前提：

新增了一个page页面，可以通过正斜杠/newShop的路径跳转。

问题：

从这个page页面点击按钮跳转到其他页面导致路由多次回调从而请求了多次接口。

点击个人申请开店跳转到测试列表页面

这个时候点击选址大厅的返回按钮跳转回申请开店页面会多次调用路由

解决方法如下：

在全局控制路由的服务中判断下是否是从newShop返回的

  /**
   * 储存跳转信息
   * @param {object} forwardObj 提示信息
   * @memberof AppGlobalService
   */
  async goToForward(forwardObj: any) {
    this.openBackdrop = false;
    let targetObj;
    if (localStorage.getItem('targetObj')) {
      targetObj = JSON.parse(localStorage.getItem('targetObj'));
    } else {
      targetObj = {
        forward: { params: {} },
        path: '',
        bat: []
      };
      // Variable.getInstance().targetObject;
    }
    targetObj.forward = forwardObj;
    const currentPath = window.location.href;
    console.log('currentPath------> ', currentPath);
    const urlArray = currentPath.split('/');
    const pageUrl = urlArray[urlArray.length - 1];
    const page = pageUrl.split('?')[0];
    const tabPages = [
      'tab1',
      'tab2',
      'tab3',
      'tab4',
      'tab5',
    ];
    let nextPath = '';

    if (tabPages.indexOf(page) > -1) {
      nextPath = 'home/' + page + '/' + 'nav' + '1';
      localStorage.setItem('lastNavIndex', '1');

    } else if (page === 'details') {
      if (!localStorage.getItem('lastNavIndex')) {
        localStorage.setItem('lastNavIndex', '1');
      }
      if (!localStorage.getItem('tabPath')) {
        localStorage.setItem('tabPath', 'home/tab1');
      }
      const index = + localStorage.getItem('lastNavIndex') !== null ? + localStorage.getItem('lastNavIndex') + 1 : 1;
      nextPath = localStorage.getItem('tabPath') + '/nav' + index;
    } else if (page === 'return_url') {

      const index = + localStorage.getItem('lastNavIndex') !== null ? + localStorage.getItem('lastNavIndex') + 1 : 1;
      nextPath = localStorage.getItem('tabPath') + '/nav' + index;
    } else if (page === 'navSearch') {

      const index = + localStorage.getItem('lastNavIndex') !== null ? + localStorage.getItem('lastNavIndex') + 1 : 1;
      nextPath = localStorage.getItem('tabPath') + '/nav' + index;
    } else if (page === 'chatOnline') {

      const index = + localStorage.getItem('lastNavIndex') !== null ? + localStorage.getItem('lastNavIndex') + 1 : 1;
      nextPath = localStorage.getItem('tabPath') + '/nav' + index;
    } else if (page === 'newShop') {
      localStorage.setItem('backToNewShop', 'true');
      const index = + localStorage.getItem('lastNavIndex') !== null ? + localStorage.getItem('lastNavIndex') + 1 : 1;
      nextPath = localStorage.getItem('tabPath') + '/nav' + index;
    } else {
      const index = + page.substring(3) + 1;
      localStorage.setItem('lastNavIndex', index.toString());
      nextPath = (localStorage.getItem('tabPath') ? localStorage.getItem('tabPath') : 'home/tab1') + '/nav' + index;
      if (index > 21) {
        nextPath = localStorage.getItem('tabPath');
        console.log('nextPath------> too deep !!!!!!!!\n', nextPath);
        localStorage.removeItem('lastNavIndex');
      }
    }
    console.log('nextPath------> ', nextPath);
    targetObj.path = nextPath;

    targetObj.bat.push(forwardObj);
    // 修改上一个请求的参数 cuttab 记住上次tab项
    if (targetObj.bat.length > 1 && forwardObj.params && forwardObj.params.cuttab) {
      const lastForwardObj = targetObj.bat[targetObj.bat.length - 2];
      if (lastForwardObj.params.cuttab) {
        lastForwardObj.params.cuttab = forwardObj.params.cuttab;
      }
    }
    localStorage.setItem('targetObj', JSON.stringify(targetObj));

    // 软切换tab1-5
    if (forwardObj.params && forwardObj.params.tabIndex) {
      // 清除访问历史

      const count = +localStorage.getItem('lastNavIndex') - 1;
      if (count > 0) {
        this.popAllTarget();
        history.go(-count);
        setTimeout(() => {
          localStorage.setItem("needRefreshTab1", "true");
          localStorage.setItem("needRefreshTab2", "true");
          localStorage.setItem("needRefreshTab3", "true");
          localStorage.setItem("needRefreshTab4", "true");
          localStorage.setItem("needRefreshTab5", "true");
          const path = 'home/' + 'tab' + forwardObj.params.tabIndex.toString();
          // add by andrew 发现一个bug从tag传过来的参数只能转string不能转obj
          forwardObj.paramsStr = JSON.stringify(forwardObj.params);
          this.router.navigate([path], { queryParams: forwardObj });
        }, 100);

      } else {
        const path = 'home/' + 'tab' + forwardObj.params.tabIndex.toString();
        forwardObj.paramsStr = JSON.stringify(forwardObj.params);
        this.router.navigate([path], { queryParams: forwardObj });
      }



    } else {
      this.router.navigate([targetObj.path], { queryParams: forwardObj });
    }
    console.log('global.service----->', JSON.stringify(targetObj.path), JSON.stringify(forwardObj));


  }

然后在申请开店页面对标志位进行处理

import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';

import { IonContent, AlertController, ModalController } from '@ionic/angular';

import { ActionSheetService, Modal } from 'ng-zorro-antd-mobile';

import { OpenAppComponent } from '../coms/open-app/open-app.component';

import { SharePageComponent } from '../coms/share-page/share-page.component';
import { ComItem } from '../route/entry/com-item';
import { AppGlobalService } from '../shared/service/app-global.service';
import { EventService } from '../shared/service/event.service';
import { HttpService } from '../shared/service/http.service';
import { TabsService } from '../shared/service/tabs.service';

@Component({
  selector: 'app-new-shop',
  templateUrl: '../route/entry/entry.page.html',
  styleUrls: ['../route/entry/entry.page.scss'],
})
export class NewShopComponent implements OnInit, OnDestroy {

  isLoading = false;
  headerComs: ComItem[];
  menusBar: any;
  coms: ComItem[];
  subComs: ComItem[];
  footerComs: ComItem[];
  sessionId: string;
  params: any = '';
  viewId: any;
  // 标签头数据
  titleBar: any;
  isHeader = true;
  isGrayBg = false; // 默认背景为灰色
  backgroundImg: string; // 头部背景图片
  showWaterImg = false;
  showRefresher = false; // 下拉刷新
  showLoading = false;

  // 位置对象
  positionInfo: any = {};
  showTopTab = false; // 是否显示顶部tab
  showSubTab = false; // 是否显示Subtab
  subTagData: any; // 顶部tab data
  subAWidth: string;
  tagData: any;
  aWidth: string;
  viewParams: any;
  isFirst = true;
  openBackdrop: boolean;
  showRefresh = false; // 是否显示刷新
  netState: any; // 网络状态
  isScrolling = false;
  private timer: any;
  // 路由对象
  routerSub: any;

  // 分享页面数据
  shareData = {
    icon: "share.png",
    layout: "right",
    submit: {
      content: {},
      id: "string"
    }
  };

  @ViewChild('superCotainer') scrollContent: ElementRef;
  @ViewChild(IonContent) content: IonContent;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    public alertController: AlertController,
    public appGlobalService: AppGlobalService,
    private modalController: ModalController,
    private eventService: EventService,
    private http: HttpService,
    private tabs: TabsService) { }

  ngOnDestroy(): void {
    // throw new Error('Method not implemented.');
    if (localStorage.getItem('backToNewShop')) {
      localStorage.removeItem('backToNewShop');
    }
  }

  ngOnInit() {
    this.openBackdrop = this.appGlobalService.openBackdrop;
    // 订阅路由
    this.routerSub = this.router.events.subscribe((event: NavigationEnd) => {
      if (localStorage.getItem('backToNewShop')) {
        return;
      }
      if (event instanceof NavigationEnd) {
        // 判断是否有参数
        if (this.route.queryParams) {
          // 路由取值
          this.route.queryParams.subscribe(queryParams => {
            console.log(queryParams.params);
            const item = JSON.parse(queryParams.item);
            // 存在参数
            if (item.params) {
              const param = {
                pageId: item.target,
                params: item.params, 
                sessionId: localStorage.getItem('sessionId')
              };
              this.getPage(param);
            }
          });
        }
      }
    });
  }

  //  获取详情页面
  getPage(params) {
    this.http.post('application/page', params, res => {
      // console.log(res);
      this.tabs.getPageData(res, pageData => {
        // console.log('new-shop=' + JSON.stringify(pageData));
        this.titleBar = pageData.titleBar;
        this.coms = pageData.coms;
        this.showRefresher = pageData.showRefresher;
        this.showLoading = pageData.showLoading;
        this.footerComs = pageData.footerComs;
      });
    });
  }

  back() {
    window.history.go(-1);
  }
  scrollEnd(e: any) {

  }

  onScroll(e: any) { }
}

这样就能避免重复请求page接口。