想要根据Angular中的条件加载父组件后访问子组件对象

Question

我的 Angular 应用程序中有一个父页面，我在其中实现了带有 4 个子组件的 UI 步骤分页。

父组件：CustomerMain.ts

• 子组件 1：BasicDetils.ts
• 子组件 2：JobDetails.ts
• 子组件 3：LocationDetils.ts
• 子组件 4：InsTermsDetails.ts

基于数据填充，我将前进到下一个子组件并从父组件加载该组件中的适当数据。

步骤 1. 创建 CustomerMain 组件并调用 API 以在单个服务中获取所有 4 个子组件数据。

@ViewChild("childBasicDetils")
  childBasicDetils: BasicDetils;
@ViewChild("childJobDetails")
  childJobDetails: JobDetails;
@ViewChild("childLocationDetils")
  childLocationDetils: LocationDetils;
@ViewChild("childInsTermsDetails")
  childInsTermsDetails: InsTermsDetails;

viewBasicDetils: boolean = true;
viewJobDetails: boolean = false;
viewLocationDetils: boolean = false;
viewInsTermsDetails: boolean = false;
res: any;

getSFCCustomerDetails(obj) {
    this.portService.getSFCCustomerDetails(obj).subscribe(res => {
       console.log(res)
       this.res = res;
       //Fill 1st Component data like below
       this.childBasicDetils.customerDetails = this.res.customerDetails;
    }
}

第 2 步。 加载第一个子组件 (BasicDetils.ts) 并从父数据中填充与该组件相关的所有数据。

第 3 步。 更新 1 个子组件中的一些记录，然后按“下一步”并加载第 2 个子组件并尝试从父组件中填充所有数据。

在第 3 步我无法访问通过@ViewChild 分配的子组件。

出现以下错误：

core.js:1673 错误类型错误：无法读取属性 未定义的“setJobDataResults” 在 AddCustomer.push../src/app/customer/add-customer/add-customer.component.ts.AddCustomer.showHideComponents (add-sweep-customer.component.ts:429) 在 SafeSubscriber._next (add-customer.component.ts:283) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196) 在 SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)

我知道原因，首先加载所有子组件，而不是仅加载第一个加载的组件，并且根据用户输入，我隐藏第一个子组件并加载第二个子组件，依此类推，直到覆盖所有子组件。

如下所示显示/隐藏子组件：

showHideComponents(index) {
    switch (index) {
      case 1:
        this.viewBasicDetils = true;
        this.viewJobDetails = false;
        this.viewLocationDetils = false;
        this.viewInsTermsDetails = false;
        break;
      case 2:
        this.viewBasicDetils = false;
        this.viewJobDetails = true;
        this.viewLocationDetils = false;
        this.viewInsTermsDetails = false;
      case 3:
        this.viewBasicDetils = false;
        this.viewJobDetails = false;
        this.viewLocationDetils = true;
        this.viewInsTermsDetails = false;
        break;
      case 4:
        this.viewBasicDetils = false;
        this.viewJobDetails = false;
        this.viewLocationDetils = false;
        this.viewInsTermsDetails = true;
        break;
      default:
        break;
    }
  }

所以在调用子组件方法并传递如下数据时基本上会出错：

//Fill 2st Component data like below
this.childJobDetails.setJobDataResults(this.res.jobDetails);

我的 HTML 如下所示：

<form class="customForm" *ngIf="viewBasicDetils" style="margin-top: 30px;">
  <add-basicdetils #childBasicDetils></add-basicdetils>
</form>

<div *ngIf="viewJobDetails" style="margin-top: 30px;">
    <add-jobDetails #childJobDetails [isIncludeCriteria]="true" [isEdit]="isEdit" (onDealIdEmit)="isDealId($event)"></add-jobDetails>
</div>

<div *ngIf="viewLocationDetils" style="margin-top: 30px;">
    <add-location-detils #viewLocationDetils [isIncludeCriteria]="false" [isEdit]="isEdit" (addedSLE)="isSLE($event)"></add-location-detils>
</div>

<add-insterms-details #childInsTermsDetails [atcIDCustName]="atcIDCustName" *ngIf="viewInsTermsDetails" (onAtcBackClick)='backCustomerDefinition($event)'></add-insterms-details>

如果我打印 ViewChild 对象，它总是给我未定义的组件对象。

请指导我如何从父组件访问第二个子组件。

提前致谢！

Answer 1

如果你使用来自 Angular 的 *ngIf 结构指令，它不会在 DOM 中呈现元素，直到条件为 true，这就是你得到 undefined @ViewChild 对象的原因.

要解决您的问题，您可以使用 HTML 的 hidden 属性，它会在 DOM 中呈现所有元素，但不会向用户显示。

示例 -

<div [hidden]="!viewJobDetails" style="margin-top: 30px;">
    <add-jobDetails #childJobDetails [isIncludeCriteria]="true" 
    [isEdit]="isEdit" (onDealIdEmit)="isDealId($event)"></add-jobDetails>
</div>

希望这会有所帮助！

Answer 2

可能不再对 OP 有用，但它可能会帮助遇到同样问题的人。

我遇到了同样的问题，我通过创建 ViewChildren 解决了它。

@ViewChildren(MyChildComponent) myViewChilds: QueryList<MyChildComponent>;

然后，我会听取我的 QueryList 上的任何更改。

  ngAfterViewInit(): void {
      this.myViewChilds.changes.subscribe(res => {
          // Here I can access my child components.
          console.log(res.first);
          res.forEach(child => {
              console.log(child);
          }
      });
  }

也许不是最干净的解决方案，但至少它可以让我保留 *ngIf。