Как исправить несколько делений ng-view, добавляемых в приложение Angular Hybrid? - PullRequest
Новая
       38

Как исправить несколько делений ng-view, добавляемых в приложение Angular Hybrid?

0 голосов
/ 17 июня 2019

Я создал гибридное приложение AngularJS / Angular, следуя Руководству по обновлению Angular и Серия обновлений Виктора Савкина , в попытке перенести огромную унаследованную базу кода.Я добавил новый маршрут в это приложение, в котором будет использоваться компонент Angular, и я использую новый Angular Router вместе с ngRoute из приложения AngularJS.

Все работает (компонент Angular используется внутри шаблона AngularJS и некоторые новыеURL-адреса, полностью работающие на Angular Components), за исключением этой небольшой и очень раздражающей проблемы - если я открываю домашнюю страницу своего приложения, я не могу использовать ни один маршрут, управляемый ngRoute, и все маршруты, управляемые Angular Router, продолжают отображатьшаблон домашней страницы.

Вот как выглядит код (все пути из каталога src корневого каталога проекта):

ng2 / app.component.html 

<router-outlet></router-outlet>
<div ng-view></div>

ng2 / app.component.ts 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
   constructor(private upgrade: UpgradeModule) { }

    ngOnInit() {
      this.upgrade.bootstrap(document.documentElement, ['app']);
    }
}

ng2 / app.module.ts 

declare var angular: any;

export class CustomHandlingStrategy implements UrlHandlingStrategy {
  shouldProcessUrl(url) {
    return url.toString().startsWith("/ng") || url.toString() == "/"
  }
  extract(url) { return url; }
  merge(url, whole) { return url; }
}

angular.module('app')
  .directive(
    'new-component',
    downgradeComponent({component: NewComponent})
  );

@NgModule({
  declarations: [
    AppComponent,
    Ng2DemoComponent
  ],
  imports: [
    BrowserModule,
    UpgradeModule,
    RouterModule.forRoot([
      {
        path: 'ng/newroute',
        component: NewComponent
      }
    ],
    {
      useHash: true,
      initialNavigation: true,
      enableTracing: true
    })
  ],
  entryComponents: [
    NewComponent
  ],
  providers: [
    { provide: UrlHandlingStrategy, useClass: CustomHandlingStrategy }
  ],
  bootstrap: [AppComponent]
})

export class AppModule {
}

ng1 / app.routes.js 

var app = angular.module('app',[
  'ngRoute'
]);
app.config(['$routeProvider',function($routeProvider){
   $routeProvider
   .when('/', {
     templateUrl:'home/home.component.html'
   }).
   .when('/phone-list', {
     templateUrl:'phoneList/phoneList.component.html'
   });
}]);

index.html 

<html lang="en">
     .
     .
     .
   <body ng-controller="rootController"> 
        <a href="#/phones"></a>
        <a routerLink="ng/newroute">New Component</a>
        <app-root></app-root>
     .
    </body>

При открытии домашней страницы приложения домашняя страница отображается правильно - но послелюбая ссылка имеет следующие эффекты:

  • Если ссылка указывает на старый URL ( # / phones в примере), адрес изменяется в адресной строке, ноНовый HTML не отображается.Новый <div ng-view> добавляется с каждым кликом по любой такой ссылке.В консоли возникает ошибка: Cannot read property 'nativeNode' of null.
  • Если ссылка указывает на новый URL ( ng / newroute в примере), она отображает ожидаемый HTML, но не делает NOT скрыть разметку home.component.html.

При запуске с любой другой страницы (например, при прямом посещении страницы # / phones , набравэто в адресной строке), каждая ссылка работает точно так, как и должно быть.

Решения, пробованные до сих пор

  • Добавление маршрута-приемника водна или обе логики маршрутизации - выполнение одного из них полностью останавливает другого.

Я что-то упустил?

...