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