如何制作角度为2的自定义标签?

时间:2016-10-26 10:18:54

标签: angular custom-element custom-tags

我的自定义组件有问题。问题是它与模型[(ngModule)] =“value”的链接并给出错误如下:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'ngModule' since it isn't a known property of 'gpi-input'.
1. If 'gpi-input' is an Angular component and it has 'ngModule' input, then verify that it is part of this module.
2. If 'gpi-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
("
<div>
    <h1>Input:</h1>
    <gpi-input name="someValue" [ERROR ->][(ngModule)]="valueInput">
        Escriu algu plis!!
    </gpi-input>

代码组件是:

import { Component, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';

const noop = () => {
};

export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => GpiInputComponent),
    multi: true
};

@Component({
    selector: 'gpi-input',
    template: `<div class="form-group">
                    <label>
                        <ng-content></ng-content>
                    </label>
                    <input [(ngModel)]="value" class="form-control"         (blur)="onBlur()">
                </div>`,
    providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR],

})
export class GpiInputComponent implements ControlValueAccessor {

    //The internal data model
    private innerValue: any = '';

    //Placeholders for the callbacks which are later provided
    //by the Control Value Accessor
    private onTouchedCallback: () => void = noop;
    private onChangeCallback: (_: any) => void = noop;

    //get accessor
    get value(): any {
        return this.innerValue;
    };

    //set accessor including call the onchange callback
    set value(v: any) {
        if (v !== this.innerValue) {
            this.innerValue = v;
            this.onChangeCallback(v);
        }
    }

    //Set touched on blur
    onBlur() {
        this.onTouchedCallback();
    }

    //From ControlValueAccessor interface
    writeValue(value: any) {
        if (value !== this.innerValue) {
            this.innerValue = value;
        }
    }

    //From ControlValueAccessor interface
    registerOnChange(fn: any) {
        this.onChangeCallback = fn;
    }

    //From ControlValueAccessor interface
    registerOnTouched(fn: any) {
        this.onTouchedCallback = fn;
    }

}

app.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { GpiInputComponent } from "../formularis/input/gpi-input";

@NgModule({
    imports: [BrowserModule, FormsModule, NgbModule.forRoot()],
    declarations: [AppComponent, GpiInputComponent],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

app.component:

import { Component } from '@angular/core';

import '../../public/css/styles.css';

@Component({
    selector: 'my-app',
    templateUrl: './src/app/app.component.html',
    //styleUrls: ['./app.component.css']
})
export class AppComponent {
    valueInput: string = "";
}

任何人都可以解决问题所在或者给我一个可以讨好的参考。谢谢!! =)

  

注意:

     

我已经向社区发现了其他问题CUSTOM_ELEMENTS_SCHEMA将文件添加到shcemas中的app.module @NgModule,但问题仍然存在。

1 个答案:

答案 0 :(得分:0)

问题不在于您显示的组件,而是使用该组件的组件。

<gpi-input name="someValue" [ERROR ->][(ngModule)]="valueInput">
    Escriu algu plis!!
</gpi-input>

[(ngModule)]应为[(ngModel)]