ES6箭头功能是否与Angular不兼容？ [英] Are ES6 arrow functions incompatible with Angular?

问题描述

这是我角色代码中的一个正常的ES5功能：

  app.run（function（$ templateCache）{$ templateCache.put（'/ some'，'thing'）}）; 
  

我想将其转换为ES6箭头功能

  app.run（$ templateCache => $ templateCache.put（'/ some'，'thing'））; 
  

但它给出错误

<$ p $未知提供者：'/ some'Provider< - '/ some'
http://errors.angularjs.org/1.4.6/ $ injector / unpr？p0 ='％2Fsome'Provider％20％3C-％20'％2Fsome'
REGEX_STRING_REGEXP @ angular.js：68
（匿名函数）@ angular.js：4287
getService @ angular.js：4435
（匿名函数）@ angular.js：4292
getService @ angular.js：4435
invoke @ angular.js：4467
匿名函数）@ angular.js：4297
forEach @ angular.js：336
createInjector @ angular.js：4297
doBootstrap @ angular.js：1657
bootstrap @ angular。 js：1678
angularInit @ angular.js：1572
（匿名函数）@ angular.js：28821
trigger @ angular.js：3022
eventHandler @ angular.js：3296

ES6箭头功能不兼容

---

编辑：我认为Angular不能推断名字 $ templateCache ，因此无法注入，但是我将其记录到控制台，并且它正确显示：

  app.run（$ templateCache =>的console.log（$ templateCache））; 
 // => 
 // Object {} 
 // destroy：function（）
 // get：function（key）
 // info：function（）
 // put ：function（key，value）
 // remove：function（key）
 // removeAll：function（）
 // __proto__：Object 
  

解决方案

正确。 您的AngularJS版本与使用的箭头功能不兼容$ inject。

这主要是因为AngularJS 1.4.6使用了（Function）.toString ，它不以函数开始（为箭头函数，至少在Firefox中：

 code>> var a =（）=> 5 
函数a（）
> a.toString（）
（）=> 5 function a（）{return 5;}
  

AngularJS支持从1.5.0以上。

Here's a normal ES5 function in my Angular code which works:

app.run(function($templateCache){ $templateCache.put('/some','thing') });

I wanted to convert it to ES6 arrow function

app.run($templateCache => $templateCache.put('/some','thing'));

but it gives the error

Uncaught Error: [$injector:unpr] Unknown provider: '/some'Provider <- '/some'
http://errors.angularjs.org/1.4.6/$injector/unpr?p0='%2Fsome'Provider%20%3C-%20'%2Fsome'
REGEX_STRING_REGEXP  @ angular.js:68
(anonymous function) @ angular.js:4287
getService           @ angular.js:4435
(anonymous function) @ angular.js:4292
getService           @ angular.js:4435
invoke               @ angular.js:4467
(anonymous function) @ angular.js:4297
forEach              @ angular.js:336
createInjector       @ angular.js:4297
doBootstrap          @ angular.js:1657
bootstrap            @ angular.js:1678
angularInit          @ angular.js:1572
(anonymous function) @ angular.js:28821
trigger              @ angular.js:3022
eventHandler         @ angular.js:3296

Are ES6 arrow functions incompatible with Angular?

---

EDIT: I thought perhaps Angular isn't able to infer the name $templateCache and so unable to inject it but then I logged it to console and it does show it correctly:

app.run($templateCache=>console.log($templateCache));
// => 
//  Object {}
//      destroy: function()
//      get: function(key)
//      info: function()
//      put: function(key, value)
//      remove: function(key)
//      removeAll: function()
//      __proto__: Object

解决方案

Correct. Your version of AngularJS is not compatible with arrow functions that make use of $injector.

This is mainly because AngularJS 1.4.6 makes use of (Function).toString, which does not start with function( for arrow functions, at least in Firefox:

>var a = () => 5
function a()
>a.toString()
"() => 5"  // not "function a() {return 5;}"

AngularJS supports the arrow notation from 1.5.0 onwards.

这篇关于ES6箭头功能是否与Angular不兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！