Установка значения дочернего списка из класса прародителя

Question

Родительский компонент, имеющий дочерний AddHospitalComponent. У AddHospitalComponent снова есть дочерний элемент AddDepartmentComponent.

AddDepartmentComponent, имеющий список DepartmentList;

Хотите установить это значение DepartmentList из HospitalsComponent, но оно возвращает ошибку. Msgstr "Невозможно установить свойство 'DepartmentList' из неопределенного".

Как я могу установить компонент AddHospitalComponent перед настройкой DepartmentList, у меня нет ничего, что можно установить для AddHospitalComponent.

Это родительский класс.

@Component({
  selector: 'app-hospitals',
  templateUrl: './add-hospitals.component.html',
  styleUrls: ['./add-hospitals.component.scss']
})
export class HospitalsComponent implements OnInit {

  @ViewChild(AddHospitalComponent, { static: true }) newHospital: AddHospitalComponent;
  constructor(public router: Router) { 

  }


  loadById(event: any) {
    this.hospitalService.getHospitalsById(event).subscribe(response => { //server call

      this.newHospital.hospDepartment.departmentList = []; // line 6
        if (response) {
        this.newHospital.hosp = new HospitalModel();
        this.newHospital.hosp = response['result'];
        this.newHospital.hospDepartment.departmentList = this.newHospital.hospital.hospDepartmentList;

      }

    })
}

on line 6 Я получаю сообщение об ошибке "Невозможно установить свойство 'DepartmentList' из неопределенного".

соответствует html для прародителя

add-hospitals.component. html

<div class="pl-2">
           <button class="btn btn-sm btn-primary" (click)="loadById(val)">Save</button>
          <app-add-hospital  #newHospital></app-add-hospital>
      </div>

Это родительский класс.

 export class AddHospitalComponent implements OnInit {

      constructor(private masterService:MasterService) { }

      @ViewChild(AddDepartmentComponent, { static: true }) hospDepartment: AddDepartmentComponent;

      }

Это дочерний класс, необходимо передать этот список DepartmentList в дочерний класс от прародителя.

export class AddDepartmentComponent implements OnInit {

  departmentList: DepartmentModel[] = [];
  }

Answer 1

Всякий раз, когда компонент @ViewChild упакован в раунд с директивой *ngIf, вы должны определить переменную @ViewChild следующим образом:

newHospital: AddHospitalComponent;
@ViewChild(AddHospitalComponent, { static: true }) set Content(newHospitalRef) {
  this.newHospital = newHospitalRef;
}

Этот синтаксис будет выполнять функцию set Content каждый время, когда ваш компонент создается / уничтожается. Таким образом, вы можете сохранить ссылку на компонент, как только он будет создан, и быть уверенным, что это не undefined.

Answer 2

В этом случае вы должны быть уверены, что представление вашего дочернего и дочернего компонента создается, прежде чем назначить свойства дочернего компонента.

Простым решением было бы установить таймер в хуке ngAfterViewInit, чтобы убедитесь, что дочерние представления созданы.

ngAfterViewInit() {
    timer(250).subscribe(() => {
         // assign grand child variables
    });
}

Хотя этого должно быть достаточно для его работы, он супероптимизирован. Другая идея может заключаться в том, чтобы иметь выходные данные для вашего дочернего и дочернего компонентов grand и инициировать событие в ngAfterViewInit дочернего компонента, чтобы его представление было готово, и чтобы свойства дочернего компонента grand были доступны с помощью ViewChild. Прослушайте этот вывод в главном компоненте и назначьте переменные при его запуске.