Angular ViewChild 与 ControlValueAccessor 的区别

Question

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

Answer 1

ViewChild 用于从父组件 class 访问子组件、指令或 DOM 元素，例如如果您想访问子元素的本机 DOM 属性，那么您可以使用 ViewChild 来访问该元素并访问它 element.nativeElement example.

ControlValueAccessor 充当 Angular 形式 API 和 DOM 中的原生元素之间的桥梁。当您想要创建自定义表单元素并希望该元素成为 Angular 表单 API 的一部分时，您将使用它，以便验证和其他事情起作用。例如您可能想要创建一个自动完成控件并希望它成为表单组的一部分，那么您将实现 ControlValueAccessor、example.

Answer 2

ControlValueAccessor 用于制作自定义表单控件。

通过步骤，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')
   })

两者具有相同的"value"

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

同样，两者给出相同的 "value"

{
  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，没有 ControlValueAccessor，什么都没有，表单是在 main.component.

中创建的

嗯，你的队友正在使用 ControlValueAccessor 来控制一个对象？这只是一个意见，但他使应用程序复杂化，真的："makes things simple"，看看其他人如何解决类似问题，重新发明轮子通常是一个坏主意

(*)在我看来，应该使用自定义表单控件来制作 "special control" 和 "special appearance"

Angular ViewChild 与 ControlValueAccessor 的区别

Angular Difference ViewChild vs ControlValueAccessor

angular

typescript

angular8

viewchild

controlvalueaccessor