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

【问题标题】：Angular2 (hybrid mode) can't Downgrade Directive to NG1 (ES5)Angular2（混合模式）无法将指令降级为 NG1（ES5）
【发布时间】：2016-07-22 22:46:24
【问题描述】：

我的问题是我试图在 ES5 中创建一个 Angular2 属性指令，同时仍处于混合模式（使用 UpgradeAdapter）。因此，所有 Angular2 代码都被转换为 NG1。这是通过使用 UpgradeAdapter 的“downgradeNG2Component”函数完成的，但由于我创建的是指令而不是组件，因此我需要使用“downgradeNG2Directive 函数”，尽管它不存在.

但你不能只在 NG1 中编码吗？ -> 不，我正在从 Angular 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>

【问题讨论】：

标签： javascript angularjs angularjs-directive angular

【解决方案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 版本的所有使用者。

【讨论】：