在角混合应用程序中首次成功路由后，Angular router.navigate无法导航

时间：2019-11-07 09:19:54

标签： angularjs angular-router angular-hybrid

我在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路由？如果上述方法行不通，谁能提出更好的解决方案？

1 个答案:

答案 0 :(得分：0)

尝试像这样进行引导时添加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")

相关问题
最新问题