覆盖装饰器属性的Angular 5组件继承 [英] Inheritance of Angular 5 components with overriding the decorator properties

问题描述

在Angular 2/4中，我们可以创建自定义装饰器来扩展父组件.装饰器属性的实际覆盖根据需要在自定义装饰器中进行处理.要获取父级注释，我们使用了:

In Angular 2/4 we could create custom decorator for extending parent component. Actual overriding of the decorator properties was handled as needed in the custom decorator. To get parent annotations we used:

let parentAnnotations = Reflect.getMetadata('annotations', parentTarget);

更新到Angular 5后，此功能不再起作用.关于此 我们可以使用的答案:

After update to Angular 5 this doesn't work anymore. Regarding this answer we could use:

target['__annotations__'][0]用于获取父组件注释.

target['__annotations__'][0] for getting parent component annotations.

为了在Angular 2/4中的当前组件中设置注释，我们使用了:

In order to set annotations in the current component in Angular 2/4 we used:

let metadata = new Component(annotation); Reflect.defineMetadata('annotations', [ metadata ], target);

let metadata = new Component(annotation); Reflect.defineMetadata('annotations', [ metadata ], target);

如何在Angular 5中设置当前组件注释?

How can set current component annotations in Angular 5?

推荐答案

最后，我来到了自定义装饰器(extendedcomponent.decorator.ts)的实现:

At the end I came up to this implementation of a custom decorator (extendedcomponent.decorator.ts):

import { Component } from '@angular/core';

export function ExtendedComponent(extendedConfig: Component = {}) {
    return function (target: Function) {
        const ANNOTATIONS = '__annotations__';
        const PARAMETERS = '__paramaters__';
        const PROP_METADATA = '__prop__metadata__';

        const annotations = target[ANNOTATIONS] || [];
        const parameters = target[PARAMETERS] || [];
        const propMetadata = target[PROP_METADATA] || [];

        if (annotations.length > 0) {
            const parentAnnotations = Object.assign({}, annotations[0]);

            Object.keys(parentAnnotations).forEach(key => {
                if (parentAnnotations.hasOwnProperty(key)) {
                    if (!extendedConfig.hasOwnProperty(key)) {
                        extendedConfig[key] = parentAnnotations[key];
                        annotations[0][key] = '';
                    } else {
                        if (extendedConfig[key] === parentAnnotations[key]){
                             annotations[0][key] = '';
                        }
                    }
                }
            });
        }
        return Component(extendedConfig)(target);
    };
}

用法示例:

首先像往常一样实现父组件(myparent.component.ts):

First implement the parent component as usual (myparent.component.ts):

import { Component, Output, EventEmitter, Input } from '@angular/core';
@Component({
    selector: 'my-component',
    templateUrl: 'my.component.html'
})
export class MyParentComponent implements OnInit {
    @Input() someInput: Array<any>;
    @Output() onChange: EventEmitter<any> = new EventEmitter();

    constructor(
        public formatting: FormattingService
    ) {
    }

    ngOnInit() {

    }

    onClick() {
        this.onChange.emit();
    }
}

在实现继承父组件的子组件之后:

After that implement child component which inherit the parent component:

import { Component, OnInit } from '@angular/core';
import { ExtendedComponent } from './extendedcomponent.decorator';
import { MyParentComponent } from './myparent.component';


@ExtendedComponent ({
    templateUrl: 'mychild.component.html'
})

export class MyChildComponent extends MyParentComponent {
}

注意:这没有正式记录，在许多情况下可能不起作用.我希望它能对其他人有所帮助，但使用后果自负.

Note: This is not officially documented and may not work in many cases. I hope that it will help somebody else, but use it at your own risk.

这篇关于覆盖装饰器属性的Angular 5组件继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！