从父组件中的子组件访问 @ViewChild NgForm 引用

Question

我有以下应用程序结构：

+--------------------------------------------+                                                                         
|                 Parent                     |                                                                         
|+------------------------------------------+|                                                                         
||                Header                    ||                                                                         
||  <form #headerForm="ngForm">             ||                                                                         
||       ...                                ||                                                                         
||  </form>                                 ||                                                                         
|+------------------------------------------+|                                                                         
|+------------------------------------------+|                                                                         
||                Content                   ||                                                                         
||  <form #contentForm="ngForm">            ||                                                                         
||      ...                                 ||                                                                         
||                                          ||                                                                         
||  </form>                                 ||                                                                         
||                                          ||                                                                         
|+------------------------------------------+|                                                                         
+--------------------------------------------+                                                                         
                                             

我想重置 header 中 forms 的状态和Parent组件的内容。 我尝试使用父组件中的@ViewChild/@ViewChildren ，但我不知道如何访问子表单引用。

到目前为止，我被迫在Parent中获取Header和Content组件的引用并调用resetForm方法：

export class ParentComponent {
  @ViewChildren('componentWithForm') componentsWithForms: QueryList<unknown>;

  ...

  this.componentsWithForms.forEach(component => (component as any).resetFormState());




@Component({
  selector: 'app-header',
   ...
  providers: [{ provide: 'componentWithForm', useExisting: forwardRef(() => HeaderComponent) }],
})
export class HeaderComponent {

  @ViewChild('headerForm') headerForm: NgForm;

  ...

  resetFormState() {
     this.headerForm.reset();
   }

虽然这在技术上有助于它导致一些丑陋的 TypeScript 铸造 - 我可以解决创建一个基类ComponentWithForm ，从它继承 Header/Content 并将提供者设置为

@Component({
  selector: 'app-header',
   ...
  providers: [{ provide: ComponentWithForm, useExisting: forwardRef(() => HeaderComponent) }],
})
export class HeaderComponent extends ComponentWithForm {

但我实际上想获得对 headerForm/contentForm 的直接引用，这样可以省去很多麻烦。

Answer 1

我知道这不是一个很大的变化，但是如果每个组件都有一个表单

 providers:[{provide:'FORM', useExisting:forwardRef(() => YourComponent)}]

和

 @ViewChild(NgForm) form

像这样的指令

@Directive({
  selector: '[haveform]'
})
export class HaveFormDirective implements AfterViewInit {
 form:NgForm
 constructor(@Host() @Inject('FORM') public component:any, ){  }
 ngAfterViewInit()
 {
  this.form=this.component.form
 }
}

允许你写

<component haveform></component>

你可以达到像这样的“形式”

 @ViewChildren(HaveFormDirective) forms:QueryList<HaveFormDirective>
 this.forms.forEach(x=>console.log(x.form.value)

堆栈闪电战

Answer 2

它认为您可以使用更好的解决方案，例如@Input()/@Output()来进行父 <-> 子组件通信。 但是如果你想使用@ViewChild ，最好从官方文档开始：

https://angular.io/guide/lifecycle-hooks#responding-to-view-changes

export class AfterViewComponent implements  AfterViewChecked, AfterViewInit {
  private prevHero = '';

  // Query for a VIEW child of type `ChildViewComponent`
  @ViewChild(ChildViewComponent) viewChild!: ChildViewComponent;

  ngAfterViewInit() {
    // viewChild is set after the view has been initialized
    this.logIt('AfterViewInit');
    this.doSomething();
  }

// ...
}

编辑：

您可以使用包含resetFormState() {}方法实现的表单为所有组件创建一个基础 class：

@Directive()
export class YourFormDirective {
     resetFormState() {  //... }
}

export class HeaderComponent extends YourFormDirective {}

export class ContentComponent extends YourFormDirective {}

然后在父级中查询WithFormDirective ：

@ViewChildren(WithFormDirective) componentsWithForms!: QueryList<WithFormDirective>;

所以你可以在没有类型转换的情况下调用它：

this.componentsWithForms.forEach(component => component.resetFormState());