Хотите получить доступ к объекту дочернего компонента после загрузки родительского компонента на основе условия в Angular - PullRequest
Новая
       21

Хотите получить доступ к объекту дочернего компонента после загрузки родительского компонента на основе условия в Angular

1 голос
/ 05 марта 2019

У меня есть одна родительская страница в моем угловом приложении, в которой реализована подкачка шагов пользовательского интерфейса с 4 дочерними компонентами.

Родительский компонент: 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. Загрузить 1-й дочерний компонент (BasicDetils.ts) и заполнить все данные, относящиеся к этому компоненту, из родительских данных.

Шаг 3. Обновите некоторые записи в 1 дочернем компоненте, нажмите «Далее» и загрузите 2-й дочерний компонент и попробуйте заполнить все данные из родительского.

Вкл. Шаг 3 Я не могу получить доступ к дочернему компоненту, который я назначаю через @ViewChild.

GettОшибка ниже:

core.js: 1673 ОШИБКА TypeError: Невозможно прочитать свойство '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: 13445 * 1044) 10441046 * Мне известна причина, по которой при первой загрузке все дочерние компоненты не загружаются только при загрузке 1-го компонента, и на основании пользовательского ввода я скрываю 1-й дочерний компонент и загружаю 2-й дочерний компонент и т. Д., Пока все дочерние компоненты не будут закрыты.

Показать / скрыть дочерние компоненты, как показано ниже: 

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.

Пожалуйста, укажите, как мне получить доступ2-й дочерний компонент от Parent.

Заранее спасибо!

1 Ответ

0 голосов
/ 06 марта 2019

Если вы используете структурную директиву *ngIf от Angular, она не будет отображать элемент в DOM, пока условие не будет true, поэтому вы получаете объект undefined @ViewChild.

Чтобы решить вашу проблему, вы можете использовать свойство hidden HTML , в котором он отображает все элементы в DOM, но не отображает их пользователю.

Пример - 

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

Надеюсь, это поможет!

...