Projecting Angular 1 Content into Angular 2 Components

In Angular 2 the concept of "transclusion" has been replaced by the concept ofprojection. ng-upgrade provides mechanisms for projecting/transcludingAngular 1.x content into Angular 2 components:

This is what a simple Angular 2 component that supports projection looks like:

  1. import {Component, Input} from '@angular/core';
  3. @Component({
  4.   selector: 'a2-projection',
  5.   template: `
  6.   <p>
  7.     Angular 2 Outer Component (Top)
  8.     <ng-content></ng-content>
  9.     Angular 2 Outer Component (Bottom)
  10.   </p>
  11.   `
  12. })
  13. export class A2Projection { }

Here's a very simple Angular 1.x directive that will be projected into theAngular 2 component:

  1. export function a1ProjectionContentsDirective() {
  2.   return {
  3.     restrict: 'E',
  4.     scope: {},
  5.     bindToController: {},
  6.     controller: A1ProjectionContents,
  7.     controllerAs: 'a1ProjectionContents',
  8.     template: `<p>{{ a1ProjectionContents.message }}</p>`
  9.   };
  10. }
  12. class A1ProjectionContents {
  13.   message = 'I am an Angular 1 Directive "projected" into Angular 2';
  14. }

Both the component and the directive must be registered with Angular 1.x:

  1. import {A2Projection} from './components/a2-projection';
  2. import {a1ProjectionContentsDirective} from
  3.   './components/a1-projection-contents';
  5. // Angular 1 Vendor Import
  6. import * as angular from 'angular';
  8. // Import the upgradeAdapter singleton
  9. import {upgradeAdapter} from './upgrade-adapter';
  11. // Name the application
  12. const APPNAME = 'angular-upgrade-example';
  14. // Register classic Angular 1 modules
  15. angular
  16.   .module(APPNAME)
  17.   .directive('a2Projection',
  18.     upgradeAdapter.downgradeNg2Component(A2Projection))
  19.   .directive('a1ProjectionContent', a1ProjectionContentsDirective);

Finally, using the HTML selectors is as simple as:

  1. <a2-projection>
  2.   <a1-projection-content></a1-projection-content>
  3. </a2-projection>

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