ngModel自定义ValuesAccessor

Question

关于ngModel和DI的高级问题.

我可以在这里看到= https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/ng_model.ts#L68 ngModel wating供应商来自NG_VALUE_ACCESSOR OpaqueToken.这意味着如果我想创建应该支持ngModel绑定的自定义组件,我应该将我对ValueAccessor的实现传递给DI.所以我脑子里有两个问题.

1)我该怎么做？

2)<input>元素的默认ValueAccessor是什么？如何让它继续工作并仅使用我的自定义组件？

顺便说一下,我在这里看到:https://github.com/angular/angular/blob/2.0.0-beta.1/modules/angular2/src/common/forms/directives/shared.ts#L102 defaultValueAccessor是最后一个.所以这意味着如果我全局通过我的ValueAccessor通过DI系统而不是默认的从未返回过.

Answer 1

您可以在相应指令ControlValueAccessor的providers(bindings不推荐使用的)属性中注册这样的自定义:

const CUSTOM_VALUE_ACCESSOR = CONST_EXPR(new Provider(
  NG_VALUE_ACCESSOR,
  {useExisting: forwardRef(() => TagsValueAccessor), multi: true}));

@Directive({
  selector: 'tags',
  host: {'(labelsChange)': 'onChange($event)'},
  providers: [CUSTOM_VALUE_ACCESSOR]
})
export class TagsValueAccessor implements ControlValueAccessor {
  (...)
}

然后,当您将使用ngModel和/或ngFormControl具有选择器的组件时,将自动选择此访问器tags:

@Component({
  (...)
  directives: [ TagsComponent, TagsValueAccessor ],
  template: `
    <tags [(ngModel)]="company.labels" 
          [ngFormControl]="companyForm.controls.labels"></tags>
  `
  })
  export class DetailsComponent {
    (...)
  }

此问题中提供了完整的示例:Angular 2自定义表单输入.

希望它对你有帮助,蒂埃里