Question

我的问题是我正在尝试在ES5中创建一个Angular2属性指令，同时仍然处于混合模式（使用UpgradeAdapter）。因此，所有Angular2代码都被转换为NG1.This是通过利用UpgradeAdapter的'downgradeNG2Component'函数来完成的，但由于我正在创建一个指令而不是一个组件，我需要使用'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>

Answer 1

根据我对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和NG 2）并排放在同一个指令中，直到你升级了所有NG1版本的消费者。

Angular2（混合模式）无法将指令降级为NG1（ES5）

1 个答案: