PrimeNG 14中如何在父p-sidebar打开时调用子组件函数？

问题根源 #

PrimeNG的p-sidebar默认会提前把内部内容渲染到DOM中，仅通过CSS控制显示/隐藏，因此子组件app-add-edit-form只会在页面首次加载时执行一次ngOnInit，后续打开侧边栏不会重新触发组件初始化逻辑。

方案一：利用Sidebar的onShow事件直接调用重置方法 #

这是最直接的实现方式，借助Sidebar的显示触发事件调用子组件的表单重置逻辑：

1. 先修改子组件，将resetForm方法改为public（父组件需要调用该方法）：

export class AddEditFormComponent implements OnInit {
  ngOnInit(): void {
    this.resetForm();
  }

  // 改为public，允许父组件调用
  public resetForm() {
    // 你的表单重置逻辑
    ...
  }
}

2. 在父组件模板中给子组件添加模板引用变量，并绑定Sidebar的onShow事件：

<p-sidebar [(visible)]="isDisplayed" [showCloseIcon]="true" position="right" (onShow)="addEditForm.resetForm()">
  <app-add-edit-form #addEditForm [model]="myObj"></app-add-edit-form>
</p-sidebar>

方案二：用*ngIf控制子组件的创建与销毁 #

通过*ngIf让子组件仅在侧边栏打开时才渲染，这样每次打开侧边栏都会重新初始化组件，自动触发ngOnInit和表单重置：

<p-sidebar [(visible)]="isDisplayed" [showCloseIcon]="true" position="right">
  <!-- 仅当isDisplayed为true时才渲染子组件 -->
  <app-add-edit-form *ngIf="isDisplayed" [model]="myObj"></app-add-edit-form>
</p-sidebar>

这种方式不需要修改子组件的方法权限，适合需要完全重新初始化组件的场景。

方案三：父组件监听侧边栏显示状态变化 #

通过@ViewChild获取子组件实例，在父组件中监听isDisplayed的状态变化，当状态变为true时调用重置方法：

1. 父组件TS代码：

import { Component, ViewChild } from '@angular/core';
import { AddEditFormComponent } from './add-edit-form.component';

@Component({
  // 组件元数据
})
export class ParentComponent {
  isDisplayed = false;
  @ViewChild(AddEditFormComponent) addEditForm!: AddEditFormComponent;

  // 通过setter监听isDisplayed的变化
  set displayed(value: boolean) {
    this.isDisplayed = value;
    if (value && this.addEditForm) {
      this.addEditForm.resetForm();
    }
  }

  get displayed() {
    return this.isDisplayed;
  }
}

2. 父组件模板调整为双向绑定自定义的displayed属性：

<p-sidebar [(visible)]="displayed" [showCloseIcon]="true" position="right">
  <app-add-edit-form [model]="myObj"></app-add-edit-form>
</p-sidebar>

同样需要将子组件的resetForm改为public。

内容的提问来源于stack exchange，提问作者Dave