要在基于角度的条件加载父组件之后访问子组件对象。

Question

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

父组件：CustomerMain.ts

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

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

步骤1.创建了CustomerMain组件并调用CustomerMain来获取单个服务中的所有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.更新一个子组件中的一些记录，然后按“下一步”并加载第二个子组件，然后尝试填充来自父组件的所有数据。

在步骤3中，无法访问通过@ViewChild分配的子组件。

出现以下错误：

无法读取AddCustomer.push../src/app/customer/add-customer/add-customer.component.ts.AddCustomer.showHideComponents (添加扫描-Customer.Component.ts:429)在SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)的SafeSubscriber._next (add-customer.component.ts:283)中未定义的属性'setJobDataResults‘。在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>

如果我打印未定义的组件对象，则总是会给出该对象。

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

提前谢谢！

Answer 1

如果您从角度上使用*ngIf结构指令，则在条件为true之前，它不会在DOM中呈现元素，这就是您获得未定义的 @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);
          }
      });
  }

也许不是最干净的解决方案，但至少它让我保持*-如果。