Injecting Across Frameworks

Angular 1.x providers/services can be upgraded and injected into Angular 2.

Simple Angular 1.x service:

  1. export class A1UpgradeService {
  2.   data = 'Hello from Angular 1 service';
  3. }

Simple Angular 2 component that will have an Angular 1.x service injected into it:

  1. import {Component, Inject} from  '@angular/core';
  2. import {A1UpgradeService} from '../services/a1-upgrade-service';
  4. @Component({
  5.   selector: 'a2-using-a1-service',
  6.   template: `<p>{{ message }}</p>`
  7. })
  8. export class A2UsingA1Service {
  9.   message = '';
  10.   constructor(@Inject('a1UpgradeService') a1UpgradeService:A1UpgradeService) {
  11.     this.message = a1UpgradeService.data;
  12.   }
  13. }

Attaching everything to Angular 1.x:

  1. import {A2UsingA1Service} from './components/a2-using-a1-service';
  2. import {A1UpgradeService} from './services/a1-upgrade-service';
  4. // Angular 1 Vendor Import
  5. import * as angular from 'angular';
  7. // Import the upgradeAdapter singleton
  8. import {upgradeAdapter} from './upgrade-adapter';
  10. // Name the application
  11. const APPNAME = 'angular-upgrade-example';
  13. // Register classic Angular 1 modules
  14. angular
  15.   .module(APPNAME)
  16.   .directive('a2UsingA1Service',
  17.     upgradeAdapter.downgradeNg2Component(A2UsingA1Service))
  18.   .service('a1UpgradeService', A1UpgradeService);

Angular 2.x services can be downgraded and injected into Angular 1. In normaloperation, Angular 2.x services would be bootstrapped with the application, butbecause of ng-upgrade being a hybrid mode, this is not the case. The upgradeadapter comes with an addProvider method that must be used in the interim.

Here is a very simple Angular 2 service:

  1. import {Injectable} from '@angular/core';
  3. @Injectable()
  4. export class A2DowngradeService {
  5.   fetchData() {
  6.     return 'some data';
  7.   }
  8. }

Since Angular 2 is bootstrapped with the upgrade adapter, there is no place toregister Angular 2 services. Fortunately the upgrade adapter's addProvidermethod can do this:

  1. upgradeAdapter.addProvider(Phones);

Lastly, Angular 1.x must be informed about the Angular 2 service:

  1. // The service to downgrade
  2. import {A2DowngradeService} from './services/a2-downgrade'
  4. // Angular 1 Vendor Import
  5. import * as angular from 'angular';
  7. // Import the upgradeAdapter singleton
  8. import {upgradeAdapter} from './upgrade-adapter';
  10. // Name the application
  11. const APPNAME = 'angular-upgrade-example';
  13. // Register classic Angular 1 modules
  14. angular
  15.   .module(APPNAME)
  16.   .factory('a2DowngradeService',
  17.     upgradeAdapter.downgradeNg2Provider(A2DowngradeService));

Using this downgraded service in an Angular 1.x directive is as simple as:

  1. import {A2DowngradeService} from '../services/a2-downgrade';
  3. export function a1UsingA2ServiceDirective() {
  4.   return {
  5.     restrict: 'E',
  6.     scope: {},
  7.     bindToController: {},
  8.     controller: A1UsingA2,
  9.     controllerAs: 'a1UsingA2',
  10.     template: `<span>{{ a1UsingA2.message }}</span>`
  11.   };
  12. }
  14. class A1UsingA2 {
  15.   message: string;
  16.   constructor(private a2DowngradeService: A2DowngradeService) {
  17.     this.message = this.a2DowngradeService.fetchData();
  18.   }
  19. }

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