Angularjs Angular router.navigate在Angular混合应用程序中首次成功路由后导航失败

我在AngularJS（1.5.6）和AngularJS（7.2.0）中有一个混合应用程序，我试图在其中实现对AngularJS和AngularJS组件都有效的路由。 我已使用以下链接更改角度组件的布线配置：

问题：当我尝试使用router.navigate方法从一个角度组件导航到另一个角度组件时，效果很好。但是，如果我尝试使用相同的router.navigate方法对任何其他页面进行其他导航或返回同一页面，则不会发生任何情况，url也不会发生任何更改

但是，如果我刷新页面（在已经导航的第二个页面上），那么来自该页面的任何导航都会发生，就像路由器被初始化为第一个导航一样

简而言之，router.navigate方法只在第一次使用。对于后续导航，除非刷新页面，否则将失败

/* app.module.ajs.ts  (AngularJS module) */

'use strict';

import routeProviderConfig from './config';
import cdcAppComponent from './cdc.app';

import CDC_CONSTANTS from './constants';
import CDC_SERVICES from './service';
import CDC_CONTROLLERS from './controller';
import CDC_DIRECTIVES from './directives';
import CDC_FILTERS from './filter';
import { environment } from '../environments/environment';

declare var angular: angular.IAngularStatic;

const MODULE_NAME = 'app';

angular.module(MODULE_NAME, [
   'ui.bootstrap',
   'ngRoute', 'ngResource', 'ngCookies', 'ngMessages', 'ngMask', 'ngSanitize',
   'pascalprecht.translate',
   'ui.grid', 'ui.grid.resizeColumns', 'ui.grid.selection', 'ui.grid.pinning', 'ui.grid.pagination', 'ui.grid.resizeColumns',
   'ui.grid.autoResize', 'ui.grid.edit', 'ui.grid.cellNav', 'ui.grid.selection', 'ui.grid.expandable', 'ui.grid.exporter',
   'ui.select',
   'toaster',
   'smart-table',
   'xeditable',
   'ngDialog',
   'BotDetectCaptcha',
   CDC_CONSTANTS, CDC_CONTROLLERS, CDC_SERVICES, CDC_FILTERS, CDC_DIRECTIVES
]).config(routeProviderConfig)
   .component('cdcApp', cdcAppComponent)
   .config(['$httpProvider', function ($httpProvider: angular.IHttpProvider) {
      $httpProvider.interceptors.push('TokenAuthInterceptor')
   }])
   .config(['captchaSettingsProvider', function (captchaSettingsProvider) {
      captchaSettingsProvider.setSettings({
         captchaEndpoint: environment.apiUrl + 'cdcapi/botdetectcaptcha'
         //For Cloud
        //captchaEndpoint: 'cdc/botdetectcaptcha'
      });
   }]);


export default MODULE_NAME;


/* app.module.ts */

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';

import { UpgradeModule } from '@angular/upgrade/static';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import moduleName from './app.module.ajs';


   /* all entries not shown*/

import { AppRoutingModule } from './app-routing.module';
import { routeParamsProvider } from './ajs-upgraded-providers';

declare var angular: angular.IAngularStatic;

const MODULE_NAME = 'app';


@NgModule({
  declarations: [
       /* all entries not shown*/
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
      /* all entries not shown*/
    AppRoutingModule,
   /* all entries not shown*/
  ],

  providers: [
   /* all entries not shown*/
    routeParamsProvider,
   /* all entries not shown*/
  ],
  entryComponents: [   
   /* all entries not shown*/
  ],

  //bootstrap: [AppComponent]
  exports: [NgxSpinnerModule],
})
export class AppModule {
  constructor(private upgrade: UpgradeModule) { }
  ngDoBootstrap() {

      /* all entries not shown*/

    console.log('Going to Bootstrap from app module');
    this.upgrade.bootstrap(document.documentElement, [moduleName], { strictDi: true });

  }

}

/* ajs-upgraded-providers.ts */

export abstract class RouteParams {
  [key: string]: string;
}

export function routeParamsFactory(i: any) {
  return i.get('$routeParams');
}

export const routeParamsProvider = {
  provide: RouteParams,
  useFactory: routeParamsFactory,
  deps: ['$injector']
};



/* app-routing-module.ts */

import { NgModule } from '@angular/core';
import { Routes, RouterModule, UrlHandlingStrategy, UrlTree, ExtraOptions } from '@angular/router';
import { APP_BASE_HREF, HashLocationStrategy, LocationStrategy } from '@angular/common';

import { LabReferralComponent } from './lab/labRefInst';
import { WorkListComponent } from './lab/workList.1';
import { NurseComponent } from './nurse/nurse.1';

export class Ng1Ng2UrlHandlingStrategy implements UrlHandlingStrategy {
    shouldProcessUrl(url: UrlTree) {
        return url.toString() === '/' || url.toString() === '/login';
    }
    extract(url: UrlTree) { return url; }
    merge(url: UrlTree, whole: UrlTree) { return url; }
}

const routes: Routes = [
    { path: 'labreferral', component: LabReferralComponent },
    { path: 'workList', component: WorkListComponent },
    { path: 'samplecollection', component: NurseComponent }, 
];

const config: ExtraOptions = {
    anchorScrolling: 'enabled',
    onSameUrlNavigation: 'reload',
    scrollPositionRestoration: 'enabled',
    useHash: true, 
    initialNavigation: false
};

@NgModule({
    imports: [RouterModule.forRoot(routes, config),],

    exports: [RouterModule],
    providers: [
        { provide: LocationStrategy, useClass: HashLocationStrategy },
        { provide: UrlHandlingStrategy, useClass: Ng1Ng2UrlHandlingStrategy }
    ]
})
export class AppRoutingModule { }


/* config.ts  (angularJS route config*/  

'use strict';

routeProviderConfig.$inject = ['$routeProvider', '$translateProvider'];

function routeProviderConfig($routeProvider, $translateProvider) {
    $routeProvider.
        when('/', {
            template: '<login></login>'
        }).
        when('/home', {
            template: '<dashboard></dashboard>'
        }).
        when('/report', {
            template: '<report></report>'
        }).      
        otherwise({
            redirectTo: '/'
        });

    $translateProvider
        .useStaticFilesLoader({
            //prefix: './assets/translations/locale-',
            prefix: './assets/translations/',
            //prefix: './assets/i18n/',
            suffix: '.json'
        })
        .preferredLanguage('en')
        .useLocalStorage()
        .useMissingTranslationHandlerLog()
        .useSanitizeValueStrategy('escape');

}

export default routeProviderConfig;

/*
    .config(function ($httpProvider) {
    $httpProvider.interceptors.push('TokenAuthInterceptor');

}).config(function (captchaSettingsProvider) {
    captchaSettingsProvider.setSettings({
        captchaEndpoint: '/cdc/botdetectcaptcha'
    });
});*/

出现此导航并显示第二页（组件）

/但当尝试使用以下命令导航回第一页时：/

/*导航没有发生，url保持不变，但我刷新页面（第二个页面的当前url），然后尝试导航，它工作了

---

有人能解释一下这种行为吗？在混合环境中可以同时使用AngularJS和AngularJS路由吗？如果上述方法不起作用，有人能提出更好的解决方案吗？

在执行以下引导时，请尝试添加

setUpLocationSync（this.upgrade）

：

ngDoBootstrap() {

      /* all entries not shown*/

    console.log('Going to Bootstrap from app module');
    this.upgrade.bootstrap(document.documentElement, [moduleName], { strictDi: true });
setUpLocationSync(this.upgrade);
}

---

如果您使用的是基于散列的路由，请尝试：

setUpLocationSync（this.upgrade，“hash”）

您可以添加stackblitz或github repo以便我们可以使用它吗？在angular 8中是否有类似问题的解决方案？此解决方案是同步Angularjs和angular 8。请让我确切地知道你在第八阶段面临什么问题？

this._router.navigate(['/workList'], { queryParams: { view: 'workList' } });

ngDoBootstrap() {

      /* all entries not shown*/

    console.log('Going to Bootstrap from app module');
    this.upgrade.bootstrap(document.documentElement, [moduleName], { strictDi: true });
setUpLocationSync(this.upgrade);
}