UpgradeComponent — Angular

Вспомогательный класс, позволяющий использовать компонент AngularJS в Angular.

API

class UpgradeComponent implements OnInit ,OnChanges ,DoCheck ,OnDestroy {
  constructor(name: string, elementRef: ElementRef<any>, injector: Injector): UpgradeComponent;
}

constructor

UpgradeComponent

Создайте новый экземпляр UpgradeComponent. Обычно этого делать не нужно. Вместо этого следует создать новый класс на основе этого класса и вызвать конструктор суперкласса из конструктора базового класса.

// This Angular directive will act as an interface to the "upgraded" AngularJS component
@Directive({
  selector: 'ng1-hero',
  standalone: false,
})
export class Ng1HeroComponentWrapper extends UpgradeComponent {
  // The names of the input and output properties here must match the names of the
  // `<` and `&` bindings in the AngularJS component that is being wrapped
  hero = input.required<Hero>();
  onRemove = output<void>();

  constructor(elementRef: ElementRef, injector: Injector) {
    // We must pass the name of the directive as used by AngularJS to the super
    super('ng1Hero', elementRef, injector);
  }
}

Параметр name должен содержать имя директивы AngularJS.
Параметры elementRef и injector должны передаваться из Angular в конструктор базового класса с помощью внедрения зависимостей.

@paramnamestring

@paramelementRefElementRef<any>

@paraminjectorInjector

@returnsUpgradeComponent

Описание

Вспомогательный класс, позволяющий использовать компонент AngularJS в Angular.

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

Этот вспомогательный класс следует использовать как базовый класс при создании директив Angular, оборачивающих компоненты AngularJS, которые необходимо «обновить».

Примечания по использованию

Примеры

Предположим, у вас есть компонент AngularJS с именем ng1Hero, который необходимо сделать доступным в шаблонах Angular.

// This AngularJS component will be "upgraded" to be used in Angular
ng1AppModule.component('ng1Hero', {
  bindings: {hero: '<', onRemove: '&'},
  transclude: true,
  template: `<div class="title" ng-transclude></div>
             <h2>{{ $ctrl.hero.name }}</h2>
             <p>{{ $ctrl.hero.description }}</p>
             <button ng-click="$ctrl.onRemove()">Remove</button>`,
});

Нам нужно создать Directive, которая сделает этот компонент AngularJS доступным в шаблонах Angular.

// This Angular directive will act as an interface to the "upgraded" AngularJS component
@Directive({
  selector: 'ng1-hero',
  standalone: false,
})
export class Ng1HeroComponentWrapper extends UpgradeComponent {
  // The names of the input and output properties here must match the names of the
  // `<` and `&` bindings in the AngularJS component that is being wrapped
  hero = input.required<Hero>();
  onRemove = output<void>();

  constructor(elementRef: ElementRef, injector: Injector) {
    // We must pass the name of the directive as used by AngularJS to the super
    super('ng1Hero', elementRef, injector);
  }
}

В этом примере видно, что нужно унаследовать базовый класс UpgradeComponent, а также указать декоратор @Directive. Это необходимо, поскольку компилятору AOT требуется, чтобы эта информация была доступна статически во время компиляции.

Обратите внимание, что необходимо выполнить следующие действия:

указать селектор директивы (ng1-hero)
указать все входные и выходные данные, ожидаемые компонентом AngularJS
унаследовать класс UpgradeComponent
вызвать базовый класс из конструктора, передав
- имя компонента AngularJS (ng1Hero)
- ElementRef и Injector для обёртки компонента