UpgradeComponent

A helper class that allows an AngularJS component to be used from Angular.

See more...

class UpgradeComponent implements OnInit, OnChanges, DoCheck, OnDestroy { constructor(name: string, elementRef: ElementRef, injector: Injector) ngOnInit() ngOnChanges(changes: SimpleChanges) ngDoCheck() ngOnDestroy() }

说明

Part of the upgrade/static library for hybrid upgrade apps that support AoT compilation.

This helper class should be used as a base class for creating Angular directives that wrap AngularJS components that need to be "upgraded".

构造函数

Create a new UpgradeComponent instance. You should not normally need to do this. Instead you should derive a new class from this one and call the super constructor from the base class.

constructor(name: string, elementRef: ElementRef, injector: Injector)

参数

name

Type: string.

elementRef

Type: ElementRef.

injector

Type: Injector.

// This Angular directive will act as an interface to the "upgraded" AngularJS component @Directive({selector: 'ng1-hero'}) 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 @Input() hero !: Hero; @Output() onRemove !: EventEmitter<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); } }
  • The name parameter should be the name of the AngularJS directive.
  • The elementRef and injector parameters should be acquired from Angular by dependency injection into the base class constructor.

方法

ngOnInit()

参数

没有参数。

ngOnChanges(changes: SimpleChanges)

参数

changes

Type: SimpleChanges.

ngDoCheck()

参数

没有参数。

ngOnDestroy()

参数

没有参数。

使用说明

Examples

Let's assume that you have an AngularJS component called ng1Hero that needs to be made available in Angular templates.

// 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>` });

We must create a Directive that will make this AngularJS component available inside Angular templates.

// This Angular directive will act as an interface to the "upgraded" AngularJS component @Directive({selector: 'ng1-hero'}) 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 @Input() hero !: Hero; @Output() onRemove !: EventEmitter<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); } }

In this example you can see that we must derive from the UpgradeComponent base class but also provide an `@Directive` decorator. This is because the AoT compiler requires that this information is statically available at compile time.

Note that we must do the following:

  • specify the directive's selector (ng1-hero)
  • specify all inputs and outputs that the AngularJS component expects
  • derive from UpgradeComponent
  • call the base class from the constructor, passing

    • the AngularJS name of the component (ng1Hero)
    • the ElementRef and Injector for the component wrapper