TypeScript UpgradeAdapter.downgradeNg2Component方法代码示例

// #docregion downgradecomponent
import {HeroDetailComponent} from './hero-detail.component';

// #enddocregion downgradecomponent
import {UpgradeAdapter} from '@angular/upgrade';

const upgradeAdapter = new UpgradeAdapter();

// #docregion downgradecomponent

angular.module('heroApp', [])
  .directive('heroDetail', upgradeAdapter.downgradeNg2Component(HeroDetailComponent));

// #enddocregion downgradecomponent

upgradeAdapter.bootstrap(
  document.querySelector('hero-app'),
  ['heroApp'],
  {strictDi: true}
);
// #enddocregion bootstrap

import { AddPinComponent } from './components/AddPinComponent';
import { PinControlsComponent } from './components/PinControlsComponent';
import { AnalyticsService } from './services/AnalyticsService';

/*
 * Create our upgradeAdapter
 */
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter(
  forwardRef(() => InterestAppModule));

/*
 * Expose our ng2 content to ng1
 */
angular.module('interestApp')
  .directive('pinControls',
             upgradeAdapter.downgradeNg2Component(PinControlsComponent))
  .directive('addPin',
             upgradeAdapter.downgradeNg2Component(AddPinComponent));

angular.module('interestApp')
  .factory('AnalyticsService',
           upgradeAdapter.downgradeNg2Provider(AnalyticsService));

/*
 * Expose our ng1 content to ng2
 */
upgradeAdapter.upgradeNg1Provider('PinsService');
upgradeAdapter.upgradeNg1Provider('$state');

@NgModule({
  declarations: [

import {Component} from '@angular/core';
import {UpgradeAdapter} from '@angular/upgrade';
import {bootstrap} from '@angular/platform-browser-dynamic';
import {Algorithms} from './components/algorithms/algorithms';
import {Adder} from './components/adder/adder';
import {Counter} from './components/counter/counter';

declare var angular:any;

var adapter: UpgradeAdapter = new UpgradeAdapter();

angular.module('angular-legacy').directive('algorithms',adapter.downgradeNg2Component(Algorithms));
angular.module('angular-legacy').directive('add',adapter.downgradeNg2Component(Adder));
angular.module('angular-legacy').directive('counterButton',adapter.downgradeNg2Component(Counter));

adapter.bootstrap(document.body, ['angular-legacy']);

// #docregion routeparams
upgradeAdapter.upgradeNg1Provider('$routeParams');
// #enddocregion routeparams

// #docregion phone-service

angular.module('core.phone')
  .factory('phone', upgradeAdapter.downgradeNg2Provider(Phone));
// #enddocregion phone-service
// #docregion phone-list

angular.module('phoneList')
  .directive(
    'phoneList',
    upgradeAdapter.downgradeNg2Component(PhoneListComponent) as angular.IDirectiveFactory
  );
// #enddocregion phone-list
// #docregion phone-detail

angular.module('phoneDetail')
  .directive(
    'phoneDetail',
    upgradeAdapter.downgradeNg2Component(PhoneDetailComponent) as angular.IDirectiveFactory
  );
// #enddocregion phone-detail

// #docregion bootstrap
upgradeAdapter.bootstrap(document.documentElement, ['phonecatApp']);
// #enddocregion bootstrap

//vanilla ng1 root component
ng1Module.component('ng1RootComponent', {
	template: `
	  <div>ng1 app</div>
	  <input ng-model="ctrl.myName" />
	  <ng1-component name="ctrl.myName"></ng1-component>
	  <ng2-component [name]="ctrl.myName"></ng2-component>
	`,
	controller: function(){
		this.myName = 'bob'
	},
	controllerAs: 'ctrl'
});

//vanilla ng1 component
ng1Module.component('ng1Component', {
	template: `<div>hello {{ctrl.name}} from ng1!</div>`,
	bindings: {
		name: '='
	},
	controller: function(){},
	controllerAs: 'ctrl'
});

//downgraded ng2 component
ng1Module.directive('ng2Component', adapter.downgradeNg2Component(Ng2Component) as any);

export const bootstrap = (el) => adapter.bootstrap(el, ['ng1-module']);

import { CarouselTitle } from './app/carousel-title/carousel-title';
import { KittensCarouselComponent, KITTENS_PROVIDERS } from './app/kittens-carousel/kittens-carousel';

import { StoreService } from './app/shared/store.service';

// enableProdMode()

// bootstrap(App, [
//   HTTP_PROVIDERS,
//   APP_ROUTER_PROVIDERS,
//   { provide: LocationStrategy, useClass: HashLocationStrategy }
// ])
// .catch(err => console.error(err));
/*
 * Create our upgradeAdapter
 */
const upgradeAdapter: UpgradeAdapter = new UpgradeAdapter();

upgradeAdapter.addProvider(KITTENS_PROVIDERS);
upgradeAdapter.addProvider(StoreService);

angular.module('cdl-kittens')
  .directive('cdlCarouselTitle',
             upgradeAdapter.downgradeNg2Component(CarouselTitle))
  .directive('cdlKittensCarousel',
             upgradeAdapter.downgradeNg2Component(KittensCarouselComponent))
  .factory('store',
            upgradeAdapter.downgradeNg2Provider(StoreService));

upgradeAdapter.bootstrap(document.body, ['cdl-kittens']);