Upgrading Components

The only Angular 1.x components that can be upgraded and used in Angular 2 codeare those that strictly follow the component pattern outlined at the top ofthis document. Wherever possible use Angular 1.5+'s .component.

Here is an Angular 1.x directive that conforms to ng-upgrade's "componentdirective" specification:

  1. angular.module('app').directive('a1Upgradable', function a1UpgradableDirective() {
  2.   return {
  3.     restrict: 'E',
  4.     scope: {},
  5.     bindToController: {},
  6.     controller: Upgradable,
  7.     controllerAs: 'a1Upgradable',
  8.     template: `<span>{{ a1Upgradable.message }}</span>`
  9.   };
  10. });
  12. class Upgradable {
  13.   message = 'I am an Angular 1 Directive';
  14. }

Equivalently this can be written using .component in Angular 1.5+:

  1. angular.module('app').component('a1Upgradable', {
  2.   controller: Upgradable,
  3.   template: `<span>{{ a1Upgradable.message }}</span>`
  4. });
  6. class Upgradable {
  7.   message = 'I am an Angular 1 Directive';
  8. }

Below is an Angular 2 component that will use the upgraded Angular 1.xdirective:

  1. import {upgradeAdapter} from '../upgrade-adapter';
  2. import {A2UsingA1Component} from './a2-using-a1.component';
  4. @NgModule({
  5.   declarations: [upgradeAdapter.upgradeNg1Component('a1Upgradable'), A2UsingA1Component],
  6.   providers: [],
  7.   imports: [BrowserModule]
  8. })
  9. export class AppModule {
  10. }
  1. import {Component} from '@angular/core';
  3. @Component({
  4.   selector: 'a2-using-a1',
  5.   template: `<p>{{ message }}<a1-upgradable></a1-upgradable></p>`
  6. })
  7. export class A2UsingA1Component {
  8.   message = 'Angular 2 Using Angular 1: ';
  9. }

Finally, let Angular 1.x know about the directive:

  1. import {a1UpgradableDirective} from './components/a1-upgradable';
  3. // Angular 1 Vendor Import
  4. import * as angular from 'angular';
  6. // Register classic Angular 1 modules
  7. angular
  8.   .module(APPNAME)
  9.   .directive('a1Upgradable', a1UpgradableDirective)

原文: https://angular-2-training-book.rangle.io/handout/migrate/ng-upgrade/upgrade-component.html