Question

我正在使用Angular 2的ES5风格。因此，我不是使用装饰器，而是定义模板如下：

var someComponent = ng.core.Component({
    // component configuration
}).Class({
    // component class
});

工作正常。最近我升级到Angular 5，现在我对同样的代码有这些错误：

ng.core.Pipe（...）。类不是函数
   。ng.core.Component（...）类＆GT;不是一个功能
  ng.core.Directive（...）。类不是函数

我应该如何在Angular 5中更改此内容？

Answer 1

JavaScript目前被认为是二等（无双关系）公民，而TypeScript是首选语言，主要是因为专注于AOT编译，仅适用于TypeScript。

正如here所述，

不再可能以这种格式声明类。
Component({...}).
Class({
  constructor: function() {...}
})
此格式仅适用于JIT和ES5。这种模式没有允许像Webpack这样的构建工具来处理和优化代码导致过大的捆绑。我们正在删除此API 因为我们正在努力确保每个人都快速前进默认情况下，无法使用ES5进入快速路径 DSL。替换是使用TypeScript和@Decorator格式。
@Component({...})
class {
  constructor() {...}
}

如this answer中所述，普通ES5及更高版本中装饰器的替代方法是使用annotations和parameters静态属性的类（以及函数）的注释。

所以

var SomeComponent = ng.core.Component({...})
.Class({
  constructor: [
    [new ng.core.Inject(Svc)],
    function (svc) {...}
  ],
  foo: function () {...}
});

变为

SomeComponent.annotations = [new ng.core.Component(...)];
SomeComponent.parameters = [
  [new ng.core.Inject(Svc)]
];
function SomeComponent(svc) {...}
SomeComponent.prototype.foo = function () {...};

作为Class功能的替代，任何第三方实用程序类库都可用于在ES5中引入语法糖和继承作为函数的替代，例如uberproto或inherits。

将现有的Angular JavaScript应用程序迁移到TypeScript是非常明智的，后者在AOT编译模式下提供了卓越的性能和更小的应用程序占用空间，在未来的版本中它将成为默认模式。 < / p>

ng.core.Component（...）。类不是函数

1 个答案: