html - 无法绑定(bind)到 'x'，因为它不是 'input' Angular 2 的已知属性

Question

使用 Angular 2，在将常规属性绑定(bind)到电话输入时遇到问题。问题如下:

Error: Template parse errors:
Can't bind to 'textMask' since it isn't a known property of 'input'. ("lass="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [ERROR ->][textMask]="{mask: mask}" #phone="ngModel">
                    <input type="email" class="form-cont"): AdvancedReviewStepEarn@14:139

这里输入:

<input type="tel" class="form-control" name="phone" id="phone" placeholder="Phone" [(ngModel)]="stepModel.phoneNumber" [textMask]="{mask: mask}" #phone="ngModel">

和组件

import { Component, OnInit, OnDestroy, Injector, ViewChild, ElementRef } from '@angular/core'
import { OperationResult, OperationDataResult, HeaderActivity } from '../../helpers/operation.models'
import { ActivatedRoute, Router } from '@angular/router';
import { ToolsService } from '../../services/tools.service'
import { SpinnerService } from '../../services/spinner.service'
import { AdvancedReviewService } from '../../services/advanced.review.service'
import { Step4Model, EarnCashViewModel } from '../../helpers/advanced.review.models'
import { TermsComponent } from '../terms.component'
import { SpinnerComponent } from '../spinner.component'
import { NgOperationValidation } from '../../helpers/operation.validation'
import { HeaderType, AdvancedReviewPage, HeaderTitle, AdvancedReviewParams, parseAdvancedReviewRoute, Page } from '../../helpers/platform.helpers'

@Component({
    selector: 'advanced-review-step-earn-component',
    templateUrl: '../../templates/advanced-review-templates/advanced.step.earn.component.html'
})
export class AdvancedReviewStepEarn implements OnInit, OnDestroy {

    @ViewChild('operationSpinner') operationSpinner: SpinnerComponent;
    @ViewChild('termsRef') terms: TermsComponent;
    @ViewChild('earnStepForm') earnStepForm;
    @ViewChild('operation') operationValidation: NgOperationValidation;
    private isSimple: boolean = false;
    private stepModel: Step4Model;
    private earnModel: EarnCashViewModel;
    private stepParams: AdvancedReviewParams;
    private isEarnCache: boolean;
    private isShowTerms: boolean = false;
    public mask: Array<string | RegExp>;

    constructor(private toolsService: ToolsService,
        private spinner: SpinnerService,
        private advancedReviewService: AdvancedReviewService,
        private injector: Injector,
        private router: Router) {
        this.initModels();
        this.mask = ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];
    }



    initModels(): void {
        this.stepParams = parseAdvancedReviewRoute(this.injector);
        if (this.stepParams.isParsed) {
            this.earnModel = new EarnCashViewModel();
            this.stepModel = new Step4Model();
            this.stepModel.reviewId = this.stepParams.reviewId;
            this.advancedReviewService.getDataForEarnCache().subscribe(this.onDataForEarnCacheLoaded.bind(this));
        } else {
            this.router.navigateByUrl(Page.NotFound);
        }
    }

    ngOnInit(): void {
    }



    ngOnDestroy(): void {
        this.spinner.start();
    }
}

我不知道如何解决这个问题。加载此页面时遇到此问题。

Answer 1

通过导入 angular2-text-mask 模块并在声明中注入(inject) MaskedInputDirective 来解决这个问题。