从祖父类设置子列表值

Question

具有子 AddHospitalComponent 的父组件。 AddHospitalComponent 再次有一个子 AddDepartmentComponent。

AddDepartmentComponent 有一个列表departmentList;

想要从 HospitalsComponent 设置这个 departmentList 值，但它返回错误。 “无法设置未定义的属性 'departmentList'”。

如何在设置部门列表之前设置 AddHospitalComponent 组件，我没有为 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;

      }

    })
}

在第 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;

      }

这是子类，需要从祖父的子类中设置这个部门列表。

export class AddDepartmentComponent implements OnInit {

  departmentList: DepartmentModel[] = [];
  }

Answer 1

在这种情况下，您需要确保在分配给大子组件属性之前实例化您的子组件和大子组件的视图。

一个简单的解决方案是在 ngAfterViewInit 挂钩中设置一个计时器，以确保子视图被实例化。

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

虽然这应该足以让它工作，但它是超级优化的。另一个想法可能是在您的大子组件和子组件上输出，并在子组件的 ngAfterViewInit 上触发一个事件，以确保其视图已准备就绪，并且可以使用 ViewChild 访问大子组件属性。 在主组件中监听这个输出，并在它被触发时分配变量。

Answer 2

每当@ViewChild 组件使用*ngIf 指令进行一轮包装时，您应该以下列方式定义您的@ViewChild 变量：

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

每次创建/销毁组件时，此语法都会执行set Content 函数。这样，您可以在创建组件后保存它的引用，并确保它不是 undefined。