错误 AOT 构建自定义组件装饰器 - 角度 5

Question

我已经构建了一个自定义组件装饰器，如此处所述 Angular 5 组件的继承，覆盖装饰器属性。

import { Component } from '@angular/core';
export function ExtendedComponent(extendedConfig: Component = {}) {
return function (target: Function) {
const annotations = target['__annotations__'] || [],
parameters = target['__paramaters__'] || [],
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);
};
}

使用中：

@ExtendedComponent({
selector: 'app-auto-complete',
})
export class AutoCompleteComponent extends AutoComplete {
constructor() {
super();
}
ngOnInit() {
}
}

它在开发模式下可以完美运行，但是当我尝试构建它时，出现以下错误：

ERROR in : Can't bind to 'suggestions' since it isn't a known         property of 'cds-auto-complete'.
1. If 'cds-auto-complete' is an Angular component and it has 'suggestions' input, then verify that it is part of this module.
2. If 'cds-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("...

我尝试添加CUSTOM_ELEMENTS_SCHEMA和NO_ERRORS_SCHEMA，但它没有帮助。对解决方案有什么想法吗？

Answer 1

像这样的自定义装饰器在 AOT 中不起作用，因为编译器正在寻找具有@Component装饰器的类。要解决此问题，您还必须将@Component()装饰器添加到类中(并删除自定义装饰器中的Component(extendedConfig)(target)(：

@Component({...})
@ExtendedComponent({
selector: 'app-auto-complete',
})
export class AutoCompleteComponent extends AutoComplete {}

但我想这有点违背了扩展组件的目的。

你可以在这里看到完整的github问题。这不是完全相同的问题，但原因相同