集成2.0角角里1.x的 - 升级模块 [英] Integrating Angular 2.0 inside Angular 1.x - upgrade module

问题描述

我试图整合的角度1.x的应用程序内的角2.0组件（播放/学习提出...）

I am trying to integrate an Angular 2.0 component inside an Angular 1.x app (for playing / learning propose...)

现在，我看到，它可以通过查看Angular2的升级模块：

Now, I see that it can be done by looking at the Angular2 upgrade module:

    import {Component, View, Inject, EventEmitter} from 'angular2/angular2';
    import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade';

    export function main() {
      describe('upgrade: ng1 to ng2', () => {
        it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));

        it('should instantiate ng2 in ng1 template and project content',
           inject([AsyncTestCompleter], (async) => {
             var Ng2 = Component({selector: 'ng2'})
                           .View({template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
                           .Class({constructor: function() {}});

             var element = html("<div>{{ 'ng1[' }}<ng2>~{{ 'ng-content' }}~</ng2>{{ ']' }}</div>");

             var upgradeModule: UpgradeModule = createUpgradeModule();
             upgradeModule.importNg2Component(Ng2);
             upgradeModule.bootstrap(element).ready(() => {
               expect(document.body.textContent).toEqual("ng1[NG2(~ng-content~)]");
               async.done();
             });
           }));
... continue tests here  ...

我创建了打字稿+ SystemJS + JSPM的角度1.x的应用程序，并使用安装角2.0 JSPM安装angular2

现在，我可以使用进口{组件}从导入Angular2'angular2 / angular2 （例如），但我找不到Angular2的$ C随时随地升级模块$ C（我想做的事进口{createUpgradeModule，UpgradeModule}从升级/更新，类似于我在测试中发现的）。

Now, I can import Angular2 using import {Component} from 'angular2/angular2' (for example), but I cannot find the upgrade module anywhere in Angular2's code (I wanted to do import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade', similar to what I found in the tests).

它是在一个单独的包？我应该手工安装呢？

Is it in a separate package? Should I install it manually?

修改

解决方案（现在），应该是：

The solution (for now), should be:

1. 使用一个自定义生成，请参见这里

以实际模块为你的项目，并导入（这是我的preferred溶液）

Take the actual module to you project and import it (this was my preferred solution)

编辑15年11月22日：

Edit 22.11.15:

由于甲型46的升级模块是公开的。无需为了更多的黑客使用它！

As of alpha 46 the upgrade module is public. No need for any more hacks in order to use it!

推荐答案

我已经做了一些工作，POC这周围，这里是一个工作的方法：

I have done some POC work around this and here is a working approach:

解决这个问题的关键是upgradeAdaptor

The key to this is the upgradeAdaptor

import {bootstrap,UpgradeAdapter} from 'angular2/angular2';
import {SomeA2Component} from './some/path';

declare var angular:any;

var adapter: UpgradeAdapter = new UpgradeAdapter();
angular.module('app').directive('SomeA2Component', adapter.downgradeNg2Component(MyA2Component));
adapter.bootstrap(document.body, ['app']);

我这儿也有一个工作示例：的http：// www.syntaxsuccess.com/viewarticle/upgrading-angular-1.x-to-2.0

这篇关于集成2.0角角里1.x的 - 升级模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！