Question

我已经构建了一个自定义组件装饰器，如此处Inheritance of Angular 5 components with overriding the decorator properties所述。

    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问题here。这不是完全相同的问题，但这是相同的原因

建立自定义组件装饰器时发生错误AOT-Angular 5

1 个答案: