ViewChild与ControlValueAccessor的角差

Question

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

Answer 1

ViewChild用于从父组件类（例如，父类）获取对子组件，指令或DOM元素的访问。如果要访问子元素的本机DOM属性，则可以使用ViewChild来访问该元素并访问它element.nativeElement example。

ControlValueAccessor充当Angular表单API和DOM中的本机元素之间的桥梁。当您要创建自定义表单元素并希望该元素成为Angular表单API的一部分时，将使用此方法，以便进行验证和其他操作。例如您可能想要创建一个自动完成控件并将其作为表单组的一部分，然后您将实现ControlValueAccessor，example。

Answer 2

Artportaitdesinn1，ControlValueAccesor用于制作自定义表单控件。

通过步骤，FormControl可以存储任何内容，甚至可以存储对象。想象两个不同的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')
   })

都具有相同的“值”

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

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

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')
      })]
  })

再次都给出相同的“值”

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

您可以创建一个自定义表单控件来控制存储对象的FormControl，并使用ControlValueAccesor，但实际上我更喜欢另一个aproach（*），它是一个简单的组件，并将formGroup或formControl作为输入传递。如果要维护最简单的事情，请不要使用formControl来存储对象。如果我有组件的应用程序方向，例如

@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中创建了表单。

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

（（*）在我看来，应该使用自定义表单控件来制作具有“特殊权限”的“特殊控件”