角度差异ViewChild与ControlValueAccessor [英] Angular Difference ViewChild vs ControlValueAccessor

问题描述

Angular中的ViewChild和ControlValueAccessor有什么区别?似乎它们都可以访问子组件，指令，DOM.如此好奇用法上的差异，一个人能做另一件事不能做吗?

What's the difference between ViewChild and ControlValueAccessor in Angular? Seems both of them can access child components, directives, DOM. So curious about the differences in usage, can one do something the other cannot do?

推荐答案

ControlValueAccesor用于制作自定义表单控件.

ControlValueAccesor is for making a custom form control.

通过步骤，FormControl可以存储任何内容，甚至可以存储对象.想象两个不同的FormGroups

By steps, a FormControl can store anything, even an object. Imagine two different FormGroups

form1=new FormGroup({
   name:new FormControl('name')
   direcction:new FormControl({address:'address',cp:'cp'})
})

form2=new FormGroup({
   name:new FormControl('name')
   direction:new FormGroup({
       address:new FormControl('address'),
       cp:new FormControl('cp')
   })

两者都具有相同的值"

both have the same "value"

{name:'name',direction:{address:'adress',cp:'cp'}}

使用表单数组时，您可以拥有

While using a form array, you can have

form1=new FormGroup({
   name:new FormControl('name')
   direcction:new FormArray([
      new FormControl({address:'address1',cp:'cp1'}),
      new FormControl({address:'address2',cp:'cp2'})
     ]
})

form2=new FormGroup({
   name:new FormControl('name')
   direction:new FormArray([
      FormGroup({
        address:new FormControl('address1'),
        cp:new FormControl('cp1')
      }),
      FormGroup({
        address:new FormControl('address2'),
        cp:new FormControl('cp2')
      })]
  })

同样，两者都给出相同的值"

And again, both give the same "value"

{
  name:'name',direction:[
     {address:'address1',cp:'cp1'},
     {address:'address2',cp:'cp2'}]
}

您可以创建一个自定义窗体控件来控制存储对象的FormControl，并使用ControlValueAccessor，但实际上我更喜欢另一种方法(*)；它是一个简单的组件，并将formGroup或formControl作为输入传递.如果要维护最简单的事情，请不要使用formControl来存储对象.如果我有类似组件的应用程序方向

You can make a custom form control to control a FormControl that stores an object, and the use ControlValueAccessor, but really I prefer another approach(*); that it's make a simple component and pass as input the formGroup or the formControl. If you want to maintenance the things simplest not use a formControl to store an object. If I have a component app-direction like

@Input()formGroup

<input [formControl]="formGroup('address')">
<input [formControl]="formGroup('cp')">

您可以用作

<app-direction [formGroup]="myform.get('direcction')"></app-direction>

或者如果您有表单数组

<div *ngFor="let group of myForm.get('direction').controls">
 <app-direction [formGroup]="group"></app-direction>
</div>

没有ViewChild，没有ControlValueAccesor，什么也没有，并且在main.component中创建了表单.

No ViewChild, no ControlValueAccesor, no nothing, and the form is created in the main.component.

那么，您的队友正在使用ControlValueAccesor来控制对象吗?这只是一种意见，但实际上，他正在使应用程序复杂化:使事情变得简单"，看看其他人如何解决类似的问题，重新发明轮子通常是个坏主意

Well, your teammate is using a ControlValueAccesor to control an object? It's only an opinion, but he is complicating the application, really: "makes things simple", see how others resolve similar problems, re-inventing the wheel usually is a bad idea

(*)我认为应该使用自定义表单控件来制作具有特殊外观"的特殊控件"

(*)In my opinion a custom form control should be used to make a "special control" with a "special appearance"

这篇关于角度差异ViewChild与ControlValueAccessor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！