Angular5 继承Angular 5组件并覆盖装饰器属性

Angular5 继承Angular 5组件并覆盖装饰器属性,angular5,Angular5,在Angular 2/4中,我们可以创建用于扩展父组件的自定义装饰器。在自定义装饰器中,装饰器属性的实际重写是根据需要处理的。要获取父注释,我们使用了: let parentAnnotations=Reflect.getMetadata('annotations',parentTarget) 在升级到Angular 5后,这不再有效。关于 我们可以使用的答案是: target[''注释][0]用于获取父组件注释 为了以2/4的角度在当前组件中设置注释,我们使用了: let元数据=新组件(注释);

在Angular 2/4中,我们可以创建用于扩展父组件的自定义装饰器。在自定义装饰器中,装饰器属性的实际重写是根据需要处理的。要获取父注释,我们使用了:

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

在升级到Angular 5后,这不再有效。关于 我们可以使用的答案是:

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

为了以2/4的角度在当前组件中设置注释,我们使用了:

let元数据=新组件(注释);
Reflect.defineMetadata('注释',[元数据],目标)


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

最后,我实现了一个自定义装饰器(extendedcomponent.decorator.ts):

用法示例:

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


注:这没有正式文件记录,在许多情况下可能不起作用。我希望它能帮助其他人,但使用它的风险自负。

它与AOT一起工作吗?自从发布后,你有什么改进吗?
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);
    };
}
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();
    }
}
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 {
}