角度差異 ViewChild 與 ControlValueAccessor

Question

Angular 中的 ViewChild 和 ControlValueAccessor 有什么區別？ 似乎他們都可以訪問子組件、指令、DOM。 對用法的差異如此好奇，一個人可以做其他人不能做的事情嗎？

Answer 1

ViewChild用於從父組件類訪問子組件、指令或 DOM 元素，例如，如果您想訪問子元素的本機 DOM 屬性，則可以使用ViewChild來訪問該元素並訪問它 element.nativeElement示例。

ControlValueAccessor充當 Angular 表單 API 和 DOM 中的原生元素之間的橋梁。 當您想要創建自定義表單元素並希望該元素成為 Angular 表單 API 的一部分時，您將使用它，以便驗證和其他工作正常進行。 例如，您可能想要創建一個自動完成控件並希望它成為表單組的一部分，然后您將實現ControlValueAccessor ，例如。

Answer 2

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 來控制一個對象？ 這只是一個意見，但他正在使應用程序復雜化，真的：“使事情變得簡單”，看看其他人如何解決類似的問題，重新發明輪子通常是一個壞主意

(*)我認為應該使用自定義表單控件來制作具有“特殊外觀”的“特殊控件”