Downgrading Components

Upgrading components sounds like it should happen before downgrading, butthe point of upgrading is to make an Angular 1.x component work with Angular 2.For an Angular 2 component to use an Angular 1.x component in an ng-upgradeapplication there must first be a downgraded Angular 2 component. Consequentlyit's important to first learn how to downgrade Angular 2 components to work withAngular 1.x

All downgraded components operate like Angular 1.x 'E' element directives.

Here is an example of a very simple Angular 2 component:

  1. import {Component} from '@angular/core';
  2. @Component({
  3. selector: 'a2-downgrade',
  4. template: '<p>{{ message }}</p>'
  5. })
  6. export class A2DowngradeComponent {
  7. message = `What you're seeing here is an Angular2 component ` +
  8. `running in an Angular1 app!`;
  9. }

Registering the downgraded component with Angular 1.x:

  1. // Angular 1 Vendor Import
  2. import * as angular from 'angular';
  3. // Import the upgradeAdapter singleton
  4. import {upgradeAdapter} from './upgrade-adapter';
  5. // Angular 2 component from above
  6. import {A2DowngradeComponent} from './components/a2-downgrade';
  7. // Register classic Angular 1 modules
  8. angular
  9. .module(APPNAME)
  10. .directive('a2Downgrade',
  11. upgradeAdapter.downgradeNg2Component(A2DowngradeComponent));

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