typescript – ngModel自定义ValuesAccessor

发布时间：2020-12-17 07:09:34 所属栏目：安全来源：网络整理

导读：关于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.这意味着如果我想创建应该支持ngMod

关于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绑定的自定义组件,我应该将我对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系统而不是默认的从未返回过.

解决方法

您可以在相应指令的提供程序(不赞成的绑定)属性中注册这样的自定义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用于带有选择器标记的组件时,将自动选择此访问器：

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

此问题中提供了完整的示例：Angular 2 custom form input.

希望它能帮到你,蒂埃里

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!