Модуль UpgradeModule

Experimental Class

Что он делает

Часть библиотеки upgrade/static для приложений гибридного обновления, поддерживающих компиляцию AoT

Позволяет использовать компоненты Angular 1 и Angular 2+ вместе внутри приложения гибридного обновления, поддерживающего компиляцию AoT.

В частности, классы и функции в модуле upgrade/static позволяют следующее:

1. Создание директивы Angular 2+, которая оборачивает и предоставляет доступ к компоненту Angular 1, чтобы его можно было использовать в шаблоне Angular 2. См. UpgradeComponent.
2. Создание директивы Angular 1, которая оборачивает и предоставляет доступ к компоненту Angular 2+, чтобы его можно было использовать в шаблоне Angular 1. См. downgradeComponent.
3. Создание поставщика корневого инжектора Angular 2+, который оборачивает и предоставляет доступ к сервису Angular 1, чтобы его можно было инжектировать в контекст Angular 2+. См. Обновление сервиса Angular 1 ниже.
4. Создание сервиса Angular 1, который оборачивает и предоставляет доступ к инжектируемому объекту Angular 2+, чтобы его можно было инжектировать в контекст Angular 1. См. downgradeInjectable.
5. Запуск гибридного приложения Angular, содержащего оба фреймворка, сосуществующих в одном приложении. См. пример ниже по ссылке пример.

Мысленный образ

При размышлении о том, как работает гибридное приложение, полезно иметь мысленный образ, описывающий, что происходит и объясняющий, что происходит на самом низком уровне.

1. В приложении работают два независимых фреймворка, каждый из которых рассматривает другой как «черный ящик».
2. Каждый элемент DOM на странице принадлежит ровно одному фреймворку. Фреймворк, который инициализировал элемент, является его владельцем. Каждый фреймворк обновляет/взаимодействует только со своими элементами DOM и игнорирует другие.
3. Директивы Angular 1 всегда выполняются внутри кодовой базы фреймворка Angular 1, независимо от места их инициализации.
4. Компоненты Angular 2+ всегда выполняются внутри кодовой базы фреймворка Angular 2+, независимо от места их инициализации.
5. Компонент Angular 1 может быть «обновлён» до компонента Angular 2+. Это достигается путем определения директивы Angular 2+, которая инициализирует компонент Angular 1 в его месте в DOM. См. UpgradeComponent.
6. Компонент Angular 2+ может быть «снижен» до компонента Angular 1. Это достигается путем определения директивы Angular 1, которая инициализирует компонент Angular 2+ в его месте в DOM. См. downgradeComponent.
7. Всякий раз, когда инициализируется компонент «обновлённый»/«сниженный», элемент-хост принадлежит фреймворку, выполняющему инициализацию. Другой фреймворк затем инициализирует и владеет представлением для этого компонента. а. Это подразумевает, что привязки компонентов всегда следуют семантике фреймворка инициализации. б. Атрибуты DOM анализируются фреймворком, который владеет текущим шаблоном. Таким образом, атрибуты в шаблонах Angular 1 должны использовать kebab-case, а шаблоны Angular 1 должны использовать camelCase. в. Однако синтаксис привязки шаблона всегда будет использовать стиль Angular 2+, например, квадратные скобки ([...]) для привязки свойств.
8. Angular 1 всегда инициализируется первым и владеет корневым компонентом.
9. Новое приложение работает в зоне Angular 2+, и поэтому больше не нуждается в вызовах $apply().

Как использовать

import {UpgradeModule} from '@angular/upgrade/static';

Пример

Импортируйте UpgradeModule в свой модуль верхнего уровня Angular 2+ NgModule.

// This NgModule represents the Angular 2 pieces of the application
@NgModule({
  declarations: [Ng2HeroesComponent, Ng1HeroComponentWrapper],
  providers: [
    HeroesService,
    // Register an Angular 2+ provider whose value is the "upgraded" Angular 1 service
    {provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}
  ],
  // All components that are to be "downgraded" must be declared as `entryComponents`
  entryComponents: [Ng2HeroesComponent],
  // We must import `UpgradeModule` to get access to the Angular 1 core services
  imports: [BrowserModule, UpgradeModule]
})
class Ng2AppModule {
  ngDoBootstrap() { /* this is a placeholder to stop the boostrapper from complaining */
  }
}

Затем запустите модуль гибридного приложения обновления, получите экземпляр UpgradeModule и используйте его для запуска модуля Angular 1 верхнего уровня.

// First we bootstrap the Angular 2 HybridModule
// (We are using the dynamic browser platform as this example has not been compiled AoT)
platformBrowserDynamic().bootstrapModule(Ng2AppModule).then(ref => {
  // Once Angular 2 bootstrap is complete then we bootstrap the Angular 1 module
  const upgrade = ref.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, [ng1AppModule.name]);
});

Обновление сервиса Angular 1

Нет специального API для обновления сервиса Angular 1. Вместо этого следуйте приведенному рецепту:

Предположим, у вас есть сервис Angular 1:

// This Angular 1 service will be "upgraded" to be used in Angular 2+
ng1AppModule.factory(
    'titleCase',
    () => (value: string) => value.replace(/((^|\s)[a-z])/g, (_, c) => c.toUpperCase()));

Затем вы должны определить поставщика Angular 2+, который будет включён в ваш модуль NgModule в свойстве providers.

// Register an Angular 2+ provider whose value is the "upgraded" Angular 1 service
{provide: 'titleCase', useFactory: (i: any) => i.get('titleCase'), deps: ['$injector']}

Затем вы можете использовать «обновленный» сервис Angular 1, инжектировав его в компонент или сервис Angular 2.

constructor(@Inject('titleCase') titleCase: (v: string) => string) {
  // Change all the hero names to title case, using the "upgraded" Angular 1 service
  this.heroes.forEach((hero: Hero) => hero.name = titleCase(hero.name));
}

Обзор класса

class UpgradeModule {
  constructor(injector: Injector, ngZone: NgZone)
  
  
  $injector : any
  injector : Injector
  ngZone : NgZone
  bootstrap(element: Element, modules?: string[], config?: any)
}

Описание класса

Этот класс является NgModule, который вы импортируете для предоставления основных сервисов Angular 1, и имеет метод экземпляра, используемый для запуска гибридного приложения обновления.

Основные сервисы Angular 1

Импорт этого NgModule добавит поставщиков основных сервисов Angular 1 в корневой инжектор.

Запуск

Экземпляр этого класса во время выполнения содержит метод bootstrap(), который используется для запуска модуля Angular 1 верхнего уровня на элементе в DOM для приложения гибридного обновления.

Он также содержит свойства для доступа к корневому инжектору, запуску NgZone и сервису $injector Angular 1.

Аннотации

@NgModule({providers: angular1Providers})

Конструктор

constructor(injector: Injector, ngZone: NgZone)

Подробное описание класса

$injector : any

Модуль Angular 1 $injector для приложения обновления.

injector : Injector

Корневой Injector для приложения обновления.

ngZone : NgZone

Зона запуска для приложения обновления.

bootstrap(element: Element, modules?: string[], config?: any)

Запуск приложения Angular 1 из этого NgModule

экспортировано из @angular/upgrade/static, определено в @angular/upgrade/src/aot/upgrade_module.ts