0

我已经构建了一个自定义组件装饰器，如此处所述Inheritance of Angular 5 components with overrideing 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，但没有帮助。关于解决方案的任何想法？

4

1 回答 1

1

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

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

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

您可以在此处查看完整的 github 问题。这不是完全相同的问题，但它是相同的原因

于 2018-10-17T09:52:57.840 回答