仅在需要时加载子元素

Question

这是我的子组件

子 html //add-child.component.html

 <div class="content">
        <h6 class="title" translate>
            <span *ngIf="addTitle" translate>Add</span>
            <span *ngIf="editTitle" translate>Edit</span>
        </h6>
        <div class="row">
       <form [formGroup]="administrationForm">
             <input type="text" class="form-control form-control-sm" 
             formControlName="adminId"
         </form>
        </div>

    </div>

子组件...

@Component({
  selector: 'app-add-hospital',
  templateUrl: './add-child.component.html'
})
export class AddChildComponent implements OnInit {

 addTitle = true;
 editTitle = false;

}

父组件.html

<button (click)="enableChild()"></button>
<app-add-child #newChild></app-add-child>

父组件

 @Component({
      selector: 'app-hospitals',
      templateUrl: './parent.component.html'
    })
    export class ParentComponent implements OnInit {

      @ViewChild(AddChildComponent , { static: true }) newChild: AddChildComponent ;
      @ViewChild(AddChildComponent , { static: true }) set Content(newChildRef) {
        this.newChild = newChildRef;
      }
    constructor(){}

     enableChild() {
      //  this.add = true;
        this.newChild.addTitle = false;
        this.newChild.editTitle = true;
        this.loadById(event);
      }

  loadById() {
//server call
    this.hospitalService.getById().subscribe(response => {
      this.newChild.administrationForm.patchValue({
          adminId: result["adminId"]
    })
   }
}

在加载父级时，它会加载子级。它会在父母页面的末尾导致大量空白空间。只有在调用 Enable child 方法时才需要加载子 DOM。我尝试在加载子项时在父项中添加 ngIf，但这会导致初始化问题，需要使用某些子项值。

如何在仅需要时加载子项。（ngIf 不工作，因为启用时我需要子项引用）

Answer 1

据我从您的代码中可以看出，您希望将状态从父级传递给子级，并以非常曲折的方式进行。您只需要简单的property-binding。

我将首先更改子组件，如下所示；

@Component({
  selector: 'app-add-hospital',
  templateUrl: './add-child.component.html'
})
export class AddChildComponent implements OnInit {
  @Input addTitle = true;
  @Input editTitle = false;
}

然后摆脱对父组件的曲折视图查询；

@Component({
  selector: 'app-hospitals',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  enableChild = false;
  addTitle: boolean;
  editTitle: boolean;

  constructor(){}

  enableChild() {
    this.enableChild = true;
    this.addTitle = false;
    this.editTitle = true;
  }
}

最后;

<button (click)="enableChild()"></button>
<app-add-child *ngIf="enableChild" [addTitle]="addTitle" [editTitle]="editTitle"></app-add-child>

Answer 2

您可以在app-add-child 组件内使用*ngIf 属性，因此组件仍然存在，但它的所有条目都被删除了

//app-data-child-content
<div class="content" *ngIf="show">
    <h6 class="title" translate>
        <span *ngIf="addTitle" translate>Add</span>
        <span *ngIf="editTitle" translate>Edit</span>
    </h6>
    <div class="row">
       <!-- form -->
    </div>
</div>
...
class ChildAddComponent{
   @Input()
   show=false;
}

///parent-component
<button (click)="enableChild()"></button>
<app-add-child [show]="showChild" #newChild></app-add-child>
...
class ParentComponent{
    showChild=false;

    enableChild() {
    this.showChild=true;
    this.enableChild = true;
    this.addTitle = false;
    this.editTitle = true;
  }
}