如何使用 angular 2 制作自定义标签？

Question

我的自定义组件有问题。问题是 link 它与模型 [(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 = "";
}

任何人都可以解决问题所在或给我一个可能是什么的参考。谢谢！！ =)

Note:

I've seen other questions to the community CUSTOM_ELEMENTS_SCHEMA adds the file to app.module @NgModule within shcemas, but the problem persists.

Answer 1

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

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

[(ngModule)] 应该是 [(ngModel)]

如何使用 angular 2 制作自定义标签？

How to make custom tags with angular 2?

custom-tags

custom-element

angular

Note: