angular 自定义组件

Angular使用了两种当前正在标准化JavaScript功能- 装饰器和元数据反射API，以允许声明性组件定义。 目前JS不支持它们，但是它们都有望很快在我们的浏览器中使用。 并且由于尚不支持这些功能，因此Angular使用TypeScript编译器来允许使用装饰器和reflect-metadata npm包来填充元数据反射API。 网上有很多文章详细介绍了装饰器和元数据API。 本文介绍了如何在Angular中使用它们。

每当我们需要在Angular中定义新组件时，我们都使用@Component装饰器，如下所示：

@Component ({ selector: 'my-app', template: '<span>I am a component</span>', }) export class AppComponent { name = 'Angular'; }

规范将装饰器定义为表达式，该表达式求值的函数将目标，名称和装饰器描述符作为参数。 “装饰器评估函数”是什么意思？ 它只是意味着您可以单独使用装饰器：

@isTestable class MyClass { } function isTestable(target) { target.isTestable = true; }

或作为返回装饰器函数的包装器函数：

@isTestable(true) class MyClass { } function isTestable(value) { return function decorator(target) { target.isTestable = value; } }

所有角度装饰器都使用带有包装函数的第二种方法。 大多数角度装饰器的核心功能是将元数据附加到类。 然后，编译器将使用此元数据来构造各种工厂。

为了更好地理解这个概念，让我们实现自定义装饰器来定义组件。 我们需要知道的第一件事是存在所有可能的组件装饰器属性。 它们在这里定义：

export const defaultComponentProps = { selector: undefined, inputs: undefined, outputs: undefined, host: undefined, exportAs: undefined, moduleId: undefined, providers: undefined, viewProviders: undefined, changeDetection: ChangeDetectionStrategy. Default , queries: undefined, templateUrl: undefined, template: undefined, styleUrls: undefined, styles: undefined, animations: undefined, encapsulation: undefined, interpolation: undefined, entryComponents: undefined };

我之前提到过，Angular使用包装器函数方法来装饰器。 该包装函数使用组件属性，并将其与默认属性合并。 让我们实现一下：

export function CustomComponentDecorator(_props) { _props = Object.assign({}, defaultProps, _props); return function (cls) { } }

我还提到了Angular中装饰器的唯一目的是将元数据附加到类上。 元数据只是具有指定属性的默认值的合并结果。 Angular希望在API中有一个全局对象Reflect来定义和检索元数据。 让我们使用此信息并稍微修改一下我们的实现：

const Reflect = global['Reflect']; export function CustomComponentDecorator(_props) { _props = Object.assign({}, defaultProps, _props); return function (cls) { Reflect.defineMetadata('annotations', [_props], cls); } }

这是@Component装饰器的本质。 现在，我们可以使用自定义装饰器代替框架提供的装饰器：

@CustomComponentDecorator({ selector: 'my-app', template: '<span>I am a component</span>', }) export class AppComponent { name = 'Angular' ; }

但是，如果您运行该应用程序，则会收到错误消息：

模块“ AppModule”声明了异常值“ AppComponent”。 请添加@Pipe / @ Directive / @ Component批注。

发生此错误是因为Angular对每个元数据实例使用运行时检查来验证它是使用适当的装饰器构造的。 由于我们使用了自定义装饰器，因此检查未通过。 对我们来说幸运的是，检查非常简单：

function isDirectiveMetadata(type: any): type is Directive { return type instanceof Directive; }

它只是检查元数据实例是否从DecoratorFactory继承。 这是一个私有函数，我们无法导入。 但是，我们可以使用我们JavaScript知识从任何修饰的元数据中获取它：

const c = class c {}; Component({})(c); const DecoratorFactory = Object.getPrototypeOf(Reflect.getOwnMetadata('annotations', c)[0]);

有了DecoratorFactory，我们只需在自定义装饰器函数中设置正确的继承即可：

export function CustomComponentDecorator(_props) { _props = Object.assign({}, defaultProps, _props); Object.setPrototypeOf(_props, DecoratorFactory); return function (cls) { Reflect.defineMetadata('annotations', [_props], cls); } }

Voilà，我们有等效的内置@Component装饰器。

您发现文章中的信息有帮助吗？

翻译自: https://hackernoon.com/implementing-custom-component-decorator-in-angular-4d037d5a3f0d

angular 自定义组件