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

问题描述

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

解决方案

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

按步骤，FormControl 可以存储任何东西，甚至是一个对象.想象两个不同的 FormGroups

form1=new FormGroup({name:new FormControl('name')方向:新表单控件({地址:'地址'，cp:'cp'})})表格 2=新表格组({name:new FormControl('name')方向:新表单组({地址:新表单控件('地址')，cp:new FormControl('cp')})

两者具有相同的价值"

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

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

form1=new FormGroup({name:new FormControl('name')方向:新的FormArray([new FormControl({address:'address1',cp:'cp1'}),new FormControl({address:'address2',cp:'cp2'})]})表格 2=新表格组({name:new FormControl('name')方向:新的FormArray([表单组({地址:新 FormControl('address1'),cp:new FormControl('cp1')}),表单组({地址:新表单控件('address2')，cp:new FormControl('cp2')})]})

再说一次，两者都给出相同的价值"

<代码>{名称:'名称'，方向:[{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('direction')"></app-direction>

或者如果你有一个表单数组

<app-direction [formGroup]="group"></app-direction>

没有ViewChild，没有ControlValueAccesor，什么都没有，表单是在main.component中创建的.

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

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

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 is for making a custom form control.

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

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')">

You can use as

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

or if you have a Form Array

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

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

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屋！