javascript – Angular2(混合模式)无法将指令降级为NG1(ES5)

我的问题是我正在尝试在ES5中创建一个Angular2属性指令,同时仍处于混合模式(使用UpgradeAdapter).因此,所有Angular2代码都被转换为NG1.This是通过利用UpgradeAdapter的’downgradeNG2Component’函数完成的,但由于我创建的是Directive而不是Component,我需要使用’downgradeNG2Directive函数’,尽管它不存在.

但是你不能只在NG1中编码吗？ – &GT不,我从角度1移植到2,并且需要代码本身为Angular2

该指令只是一个简单的autoFocus指令,只要“li-common-auto-focus”是一个属性,就会聚焦一个元素.

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>

解决方法:

根据我对UpgradeAdapter代码的理解,您无法降级属性指令.
当您降级构造指令所具有的组件时
限制：’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和NG 2)并排放在同一个指令中,直到你升级了所有NG1版本的消费者.

javascript – Angular2(混合模式)无法将指令降级为NG1(ES5)

相关推荐