Angular router.navigate не может перемещаться после первой успешной маршрутизации в угловом гибридном приложении - PullRequest
Новая
       51

Angular router.navigate не может перемещаться после первой успешной маршрутизации в угловом гибридном приложении

0 голосов
/ 07 ноября 2019

У меня есть гибридное приложение в 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

Проблема: Когда я пытаюсь перейти от компонента Angular к другому компоненту Angular с помощью метода 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'
    });
});*/

/ ** Вызов 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 маршрутизацию в гибридной среде? Кто-нибудь может предложить лучшее решение, если вышеуказанный подход не будет работать?

...