Angular Разница ViewChild против ControlValueAccessor - PullRequest
Новая
       54

Angular Разница ViewChild против ControlValueAccessor

1 голос
/ 11 февраля 2020

В чем разница между ViewChild и ControlValueAccessor в Angular? Кажется, что они оба могут получить доступ к дочерним компонентам, директивам, DOM. Любопытно узнать о различиях в использовании, можно ли сделать то, что не может сделать другое?

Ответы [ 2 ]

1 голос
/ 11 февраля 2020

ControlValueAccesor предназначен для создания пользовательского элемента управления формы .

Постепенно FormControl может хранить что угодно, даже объект. Представьте, что две разные группы FormGroup 

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>

No ViewChild, нет ControlValueAccesor, нет ничего, и форма создается в main.component.

Что ж, ваш напарник использует ControlValueAccesor для управления объектом? Это всего лишь мнение, но он усложняет приложение, на самом деле: «все упрощает», посмотри, как другие решают подобные проблемы, изобретать колесо обычно - плохая идея

(*) На мой взгляд, пользовательский элемент управления формы должен использоваться для создания «специального элемента управления» с «особым внешним видом»

1 голос
/ 11 февраля 2020

ViewChild используется для получения доступа к дочернему компоненту, директиве или элементу DOM из класса родительского компонента, например, если вы хотите получить доступ к собственным свойствам DOM дочернего элемента, вы можете использовать ViewChild для получить доступ к элементу и получить к нему доступ element.nativeElement пример .

ControlValueAccessor действует как мост между API форм Angular и собственным элементом в DOM. Вы будете использовать это, когда хотите создать пользовательский элемент формы и хотите, чтобы этот элемент был частью Angular API форм, чтобы валидация и другие вещи работали. Например, вы можете захотеть создать элемент автозаполнения и хотите, чтобы он был частью группы форм, тогда вы реализуете ControlValueAccessor, пример .

...