带数据绑定的输入元素上的Angular 4指令

我正在尝试为表单中的输入元素编写一个属性指令，该指令验证给定用户名是否可用

我这样做有两个问题

1我希望通过允许该指令接收它应该用来验证用户名的API路由，使其可重用。这是我所拥有的，正如您所看到的，它不接受任何输入，没有绑定，并且工作得非常完美

import { Directive, forwardRef } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(environment.apiEndpoint + '/company/username-check', {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

一旦我添加@Input'uniqueCompanyUsername'路由：string；并尝试通过指令本身走路线，它给了我以下错误：

无法绑定到“uniqueCompanyUsername”，因为它不是的已知属性 “输入”

以下是我在指令控制器中写的内容：

import { Directive, forwardRef, Input } from '@angular/core';
import { AbstractControl, Validator, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { environment } from '../../../../environments/environment';
import { Observable } from 'rxjs/Observable';

@Directive({
  selector: '[uniqueCompanyUsername]',
  providers: [
    {
      provide: NG_ASYNC_VALIDATORS,
      useExisting: forwardRef(() => CompanyUsernameValidatorDirective), multi: true
    },
  ]
})
export class CompanyUsernameValidatorDirective implements Validator {
  constructor(private http: HttpClient) {
  }

  @Input('uniqueCompanyUsername') route: string;

  validate(username: AbstractControl) {
    return Observable.timer(1000).switchMap(() => {
      return this.http.post(`${environment.apiEndpoint}${this.route}`, {
        username: username.value
      }).map((result: any) => result.success ? null : { uniqueCompanyUsername: false });
    });
  }
}

这是我的模板：

<input name="companyUsername" [(ngModel)]="company.username" id="input-username" #companyUsername="ngModel" class="form-control" placeholder="Company Username"
                [class.form-control-danger]="companyUsername.invalid && companyUsername.touched" [minlength]="3" [maxlength]="50" [required]="true"
                [uniqueCompanyUsername]="/company/username/" autofocus>

---

我很沮丧，我不明白这里出了什么问题

属性名称需要与输入装饰器名称匹配

更改此项：

@Input('uniqueCompanyUsername') route: string;

为此：

@Input() uniqueCompanyUsername: string;

还要记住将组件中的this.routes更改为this.uniquecompanyUserName

---

更多关于它工作的信息，谢谢！但是如果我仍然想使用[uniqeCompanyUsername]获取路由并使用这个路由器呢？？喜欢我写的吗？@mamsoudi请检查添加的链接。基本上，属性名称需要与输入装饰器名称匹配。如果要使用route，请在模板中将[uniqeCompanyUsername]更改为[route]。您的指令应该可以工作，但如果要传递字符串，请编写[uniqueCompanyUsername]='/company/username/'或uniqueCompanyUsername=/company/username/参见示例@yurzui yeah my bad。