无法绑定到'x'，因为它不是'输入'的已知属性Angular 2

Question

使用Angular 2时，遇到了将常规属性绑定到电话输入的问题。问题是如下：

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模块解决此问题，并注入MaskedInputDirective进行声明。