downgradeComponent

Experimental Function

Что делает

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

Позволяет использовать компонент Angular 2+ в Angular 1.

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

Предположим, у вас есть компонент Angular 2+ под названием ng2Heroes, который необходимо сделать доступным в шаблонах Angular 1.

// This Angular 2 component will be "downgraded" to be used in Angular 1
@Component({
  selector: 'ng2-heroes',
  // This template uses the upgraded `ng1-hero` component
  // Note that because its element is compiled by Angular 2+ we must use camelCased attribute names
  template: `<h1>Heroes</h1>
             <p><ng-content></ng-content></p>
             <div *ngFor="let hero of heroes">
               <ng1-hero [hero]="hero" (onRemove)="removeHero.emit(hero)"><strong>Super Hero</strong></ng1-hero>
             </div>
             <button (click)="addHero.emit()">Add Hero</button>`,
})
class Ng2HeroesComponent {
  @Input() heroes: Hero[];
  @Output() addHero = new EventEmitter();
  @Output() removeHero = new EventEmitter();
}

Мы должны создать директиву Angular 1 директиву, которая сделает этот компонент Angular 2+ доступным внутри шаблонов Angular 1. Функция downgradeComponent() возвращает функцию-фабрику, которую мы можем использовать для определения директивы Angular 1, которая оборачивает компонент «downgraded».

// This is directive will act as the interface to the "downgraded"  Angular 2+ component
ng1AppModule.directive(
    'ng2Heroes',
    downgradeComponent(
        // The inputs and outputs here must match the relevant names of the properties on the
        // "downgraded" component
        {component: Ng2HeroesComponent, inputs: ['heroes'], outputs: ['addHero', 'removeHero']}));

В этом примере вы можете увидеть, что мы должны предоставить информацию о компоненте, который «понижается». Это связано с тем, что после выполнения компилятора AoT вся метаданные о компоненте удаляются из кода и поэтому не могут быть выведены.

Мы должны сделать следующее:

• указать класс компонента Angular 2+, который будет понижен
• указать все входные и выходные данные, которые ожидает компонент Angular 1

Экспорт класса

export downgradeComponent(info: /* ComponentInfo */ {
  component: Type<any>;
  inputs?: string[];
  outputs?: string[];
}) : any

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

Параметр содержит информацию о компоненте, который понижается:

• component: Type<any>: Тип компонента, который будет понижен
• inputs: string[]: Коллекция строк, определяющих входные данные, принимаемые компонентом.
• outputs: string[]: Коллекция строк, определяющих выходные данные, которые генерирует компонент.

inputs и outputs — это строки, которые отображают имена свойств к именам атрибутов с camelCase. Они имеют вид "prop: attr"; или просто `"propAndAttr", где свойство и атрибут имеют одинаковый идентификатор.

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