角差ViewChild与ControlValueAccessor

Question

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

Answer 1

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和使用ControlValueAccessor，但实际上我更喜欢另一种方法(*)；它是一个简单的组件，并作为输入传递给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来控制一个对象？这只是一个观点，但他正在使应用程序复杂化，真的：“让事情变得简单”，看看别人如何解决类似的问题，重新发明轮子通常是个坏主意。

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

Answer 2

ViewChild用于从父组件类获得对子组件、指令或DOM元素的访问，例如，如果您希望访问子元素的本机DOM属性，则可以使用ViewChild访问该元素并访问它element.nativeElement 示例。

ControlValueAccessor充当角forms与DOM中的本机元素之间的桥梁。当您想要创建一个自定义表单元素并希望该元素成为角表单API的一部分时，您将使用它，这样验证和其他事情就可以工作了。例如，您可能希望创建一个自动完成的控件，并希望它成为表单组的一部分，然后您将实现ControlValueAccessor、示例。