我的问题是我正在尝试在ES5中创建一个Angular2属性指令,同时仍处于混合模式(使用UpgradeAdapter).因此,所有Angular2代码都被转换为NG1.This是通过利用UpgradeAdapter的’downgradeNG2Component’函数完成的,但由于我创建的是Directive而不是Component,我需要使用’downgradeNG2Directive函数’,尽管它不存在.
但是你不能只在NG1中编码吗? – >不,我从角度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版本的消费者.
原文地址:https://codeday.me/bug/20190706/1394588.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。