如何在点击功能上重新渲染包含的组件？

Question

我有一个列表组件，其中有一个对话框，其中包含我用来编辑和创建新数据的表单组件。该组件是独立的（在同一个模块中）并在这样的对话框中调用：

<p-dialog header="Header" width="700" [resizable]="false"
[(visible)]="displayDialog"modal="true">
   <app-detail [id]="id"></app-detail>
</p-dialog>

创建和编辑按钮位于列表组件中 html，当我单击编辑按钮时，应该将一个 ID 传递给详细信息组件并加载数据并为我填写表单。但是当列表 html 呈现时，细节组件似乎只渲染一次，当我单击编辑按钮时没有任何响应，没有新的 id 被传递到细节组件。

我该怎么办？

Answer 1

从 [(visible)] 对话框数据绑定来看，它没有 destroy/create <app-detail> 组件，只是简单地隐藏和显示它。所以 <app-detail> 组件只渲染一次是有道理的。

如果您想在每次 displayDialog 更改时重新创建 <app-detail> 组件，只需将 *ngIf 指令添加到组件。

像这样：

<p-dialog header="Header" width="700" [resizable]="false"
  [(visible)]="displayDialog" modal="true">
   <app-detail [id]="id" *ngIf="displayDialog"></app-detail>
</p-dialog>

如何在点击功能上重新渲染包含的组件？

How to re-render an included component on click function?

angular

components

rendering

primeng

primeng-dialog