Question

我正在尝试扩展primeng（6）组件，但出现错误：

未捕获的错误：模板解析错误：'p-inputMask-my'不是已知元素： 1.如果“ p-inputMask-my”是Angular组件，则请验证它是否是此模块的一部分。 2.如果“ p-inputMask-my”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas” 禁止显示此消息。

这是我的配置：

装饰器：

import { Component } from '@angular/core';
import "reflect-metadata";
import 'zone.js';

export function CustomComponent( annotation: any ) {
    return function( target: Function ) {
        var parentTarget = Object.getPrototypeOf( target.prototype ).constructor;
        var parentAnnotations = Reflect.getMetadata( 'annotations', parentTarget );
        if ( parentAnnotations ) {
            var parentAnnotation = parentAnnotations[0];
            Object.keys( parentAnnotation ).forEach( key => {
                if ( isPresent( parentAnnotation[key] ) ) {
                    // verify is annotation typeof function
                    if ( typeof annotation[key] === 'function' ) {
                        annotation[key] = annotation[key].call( this, parentAnnotation[key] );
                    } else if (
                        // force override in annotation base
                        !isPresent( annotation[key] )
                    ) {
                        annotation[key] = parentAnnotation[key];
                    }
                }
            } );
        }
        var metadata = new Component( annotation );
        Reflect.defineMetadata( 'annotations', [metadata], target );
    }

    function isPresent( obj: any ): boolean {
        return obj !== undefined && obj !== null;
    }
}

自定义组件：

import { ElementRef, NgModule, OnInit } from '@angular/core';
import { CustomComponent } from './custom-component.decorator';
import { InputMask } from 'primeng/inputmask';
import { DomHandler } from 'primeng/components/dom/domhandler';
import { CommonModule } from '@angular/common';

@CustomComponent( {
    selector: 'p-inputMask-my',
    parent: InputMask
} )
export class InputMaskMy extends InputMask implements OnInit {

    constructor( public el: ElementRef, public domHandler: DomHandler ) {
        super( el, domHandler );
    }

    ngOnInit() {
    }

    updateModel( e ) {
        var updatedValue = this.unmask ? this.getUnmaskedValue() : e.target.value;
        if ( updatedValue !== null || updatedValue !== undefined ) {
            this.value = updatedValue;
            console.log( this.value );
            if ( this.isCompleted() ) {
                this.onModelChange( this.value );
            }
        }
    }

}

@NgModule( {
    imports: [CommonModule],
    exports: [InputMaskMy],
    declarations: [InputMaskMy]
} )
export class InputMaskMyModule { }

应用程序模块：

import { InputMaskMyModule } from './component/input-mask-my';
@NgModule( {
    declarations: [
...
],
imports: [
InputMaskMyModule,
...
]

component.html：

<p-inputMask-my mask="9.99Ea99" characterPattern="[+-]" [(ngModel)]="rowData.achivedDetectionlimit" (onComplete)="dt.onEditComplete.emit({field: 'achivedDetectionlimit', data: rowData})"></p-inputMask-my>

我错过了什么？

我也注意到

var parentAnnotations = Reflect.getMetadata（'annotations'，parentTarget）;

总是返回null是否正常？

Angular6中的自定义组件未协调：错误

0 个答案: