typescript - 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 等待提供者来自 NG_VALUE_ACCESSOR OpaqueToken。这意味着如果我想创建应该支持 ngModel 绑定(bind)的自定义组件，我应该将我对 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 是最后一个。所以这意味着如果我通过 DI 系统全局传递我的 ValueAccessor 而不是默认值，则永远不会返回。

Answer 1

您可以在相应指令的 providers(bindings 已弃用)属性中像这样注册自定义 ControlValueAccessor:

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 custom form input .

希望对你有帮助， 蒂埃里