我在 AngularJS (1.5.6) 和 Angular (7.2.0) 中有一个混合应用程序，我正在尝试实现适用于 Angular 和 AngularJS 组件的路由。我已使用以下链接更改 Angular 组件的路由配置：https ://github.com/angular/angular.io/tree/master/public/docs/_examples/upgrade-phonecat-3-router/ts/app
问题：当我尝试使用 router.navigate 方法从一个 Angular 组件导航到另一个 Angular 组件时，它工作正常。但是，如果我尝试使用相同的 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'
});
});*/
/** 调用 router.navigate 从第一个角度分量到第二个角度分量 **/
let url: any = '/samplecollection';
let link = [url];
this._router.navigate(link, { queryParams: { selectedOrder: JSON.stringify(selectedOrder), navFrom: navFrom } });
发生此导航并显示第二页（组件）。
/但是当尝试使用以下命令导航回第一页时： /
this._router.navigate(['/workList'], { queryParams: { view: 'workList' } });
/* 导航没有发生，url 保持不变，但我刷新页面（第二页的当前 url）然后尝试导航，它可以工作
谁能解释一下这种行为？是否可以在混合环境中同时使用 Angular 和 AngularJS 路由？如果上述方法不起作用，任何人都可以提出更好的解决方案吗？