时间戳

首页 > 解决方案 > Angular 7 - 在子组件初始化后，视图子仍然返回为未定义

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

问题描述

我有一个组件正在使用 View Change 订阅来监视表单复选框中的更改。当复选框更改为 true 时，子组件的表单将设置为禁用，当复选框为 false 时启用。每次我在选中复选框时尝试调用 View Child 函数时，都会返回以下错误：错误类型错误：无法读取未定义的属性“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()，但我收到以下错误：错误类型错误：无法读取未定义的属性 'enableForm'。

标签： angulartypescript

解决方案

您可以按组件引用它。如果你的<app-datetimepicker>组件类是class AppDatetimepicker，那么你可以试试这个：

@ViewChild(AppDatetimepicker) effectiveDateComponent: AppDatetimepicker;

推荐阅读