Question

我有一个组件，该组件利用“查看更改”订阅来监视表单复选框中的更改。当复选框更改为true时，如果复选框为false，则子组件的窗体将设置为禁用和启用。每次我在选中复选框时尝试调用View Child函数时，都会返回以下错误：错误TypeError：无法读取未定义的属性“ enableForm”。

我在此处讨论该问题的帖子似乎指向子组件被ngIf隐藏，但在我的实例中不是这种情况。

我已经在控制台记录了各种Angular生命周期事件，NgOnInit，NgAfterViewInit，createForm（）等，并且它们都在初始化表单时返回。我还能够将值传递给子组件，该值将禁用Init上的子表单字段，从而使该部分正常工作。但是我无法让View Child通过相同的组件实例工作。

在这里我初始化我的View Child：

@ViewChild('effectiveDateComponent') effectiveDateComponent: any;

在这里，我正在侦听复选框中的表单更改（称为“ futureDelete”：

    this.editForm.get('futureDelete').valueChanges.subscribe(val => {
      if (val === false) {
        this.effectiveDateComponent.disableForm();
        this.deleteButtonDisableFlag = false;
      }
      if (val === true) {
        this.effectiveDateComponent.enableForm();
        this.deleteButtonDisableFlag = true;
        this.editForm.controls.dateSearch.get('date').valueChanges.subscribe(val => {
          if (val) {
            this.deleteButtonDisableFlag = false;
          }
          if (!val) {
            this.deleteButtonDisableFlag = true;
          }
        });
      }
    });

这是我的HTML组件调用：

<app-datetimepicker #effectiveDateComponent [disabled]="true" [dateField]="'effectiveDate'" (dateEmit)="receiveDateEmit($event)" [placeholder]="'yyyy-mm-dd'">Effective Date</app-datetimepicker>

我希望函数disableForm（）或enableForm（）被调用，但我收到以下错误：错误TypeError：无法读取未定义的属性'enableForm'。

Answer 1

您可以按组件引用此内容。如果您的<app-datetimepicker>组件类是class AppDatetimepicker，则可以尝试以下方法：

@ViewChild(AppDatetimepicker) effectiveDateComponent: AppDatetimepicker;

Answer 2

我认为您的代码在ViewChild解决之前就已经执行了，也许您只需在if (this.effectiveDateComponent){}和enableForm()方法周围添加一个disableForm();

Answer 3

您需要将此订阅放置在ngAfterViewInit生命周期挂钩中。

根据Angular documentation，对ngAfterViewInit生命周期挂钩的描述：

在Angular初始化组件的视图和子级后响应视图/指令所在的视图。

Answer 4

作为一种解决方法，您可以在父组件中设置一个变量，该变量可以在函数中设置，该变量可以订阅复选框的值更改。此变量可以设置为子组件和子组件的输入您需要订阅输入变量上的ngOnChanges来查看变量是否已更改，然后使用它来启用和禁用表单。与此类似：Angular 2 : ViewChild is undefined on parent

Angular 7-子组件初始化后，视图子仍然返回未定义状态

4 个答案: