2016-07-22 5 views
4

問題点私は、ハイブリッドモードで(UpgradeAdapterを使用して)E​​S5でAngular2属性ディレクティブを作成しようとしていますか?したがって、すべてのAngular2コードはNG1に変換されています。これはUpgradeAdapterの 'downgradeNG2Component'関数を使用して行いますが、コンポーネントではなくディレクティブを作成しているので、 'downgradeNG2Directive関数'を使用する必要があります。Angular2(ハイブリッドモード)はディレクティブをNG1(ES5)にダウングレードできません

ただし、NG1でコードを作成することはできませんか? - >いいえ私は角度1から2に移植しており、コード自体をAngular2にする必要があります

このディレクティブは " 。

TLDR:upgradeAdapterを使用してAngular2属性ディレクティブをNG1に変換する方法があるのでしょうか?ここで

は、コードは次のとおりです。

AutoFocus.js

//<example> 
// <file name="index.html"> 
//  <input class="type-text" type="text" li-common-auto-focus> 
// </file> 
// </example> 


var autoFocusModule = angular.module('li.directives.common.auto-focus', []); 
var liCommonAutoFocus = ng.core 
    .Directive({ 
     selector:"li-common-auto-focus", 
     inputs:["ignoreMe"] 
    }) 
    .Class({ 
     constructor:[ng.core.ElementRef, function(eltRef){ 
     console.log(eltRef); 
     console.log(eltRef.nativeElement); 
     }], 
     ngAfterViewInit:function(){ 

     } 
}); 

autoFocusModule.directive(OBJ.Angular.upgradeAdapter.downgradeNg2Component(liCommonAutoFocus)); 

init.js

var OBJ = { 
    Angular: { 
    upgradeAdapter: new ng.upgrade.UpgradeAdapter() 
    } 
}; 

bootstrap.js

OBJ.Angular.upgradeAdapter.bootstrap(document.body, ['li.directives.common.auto-focus']); 

HTML

<html> 
    <head> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="https://code.angularjs.org/1.5.6/angular.min.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/Rx.umd.min.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.8/angular2-all.umd.dev.js"></script> 
    </head> 

    <body> 

    <div>Testing</div> 
    <input class="type-text" size="50px" type="text" placeholder=""> 
    <input class="type-text" size="50px" type="text" placeholder="Should Focus ME" li-common-auto-focus> 
    <input class="type-text" size="50px" type="text" placeholder=""> 


    <script src="init.js"></script> 
    <script src="auto-focus.js"></script> 
    <script src="bootstrap.js"></script> 
    </body> 

</html> 

答えて

0

UpgradeAdapterコードを理解してから、属性ディレクティブをダウングレードできませんでした。あなたがコンポーネントを構築ディレクティブをダウングレードすると は restrict: 'E', https://github.com/angular/angular/blob/f92591054bd4c45026939bcd49fd7e49c32db28a/packages/upgrade/src/common/downgrade_component.ts#L70

を持っている別のアプローチは、ディレクティブは、ディレクティブのアップグレードのアップグレード・ガイドを参照してくださいアップグレードすることです。 https://angular.io/docs/ts/latest/guide/upgrade.html#!#using-angularjs-component-directives-from-angular-code

NG1バージョンのすべてのコンシューマをアップグレードするまで、同じディレクティブの2つのバージョン(NG1とNG2)を並べて並べることもできます。

関連する問題