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)]对话框数据绑定判断，它不会破坏/创建<app-detail>组件，而只是隐藏并显示它。因此，<app-detail>组件只渲染一次是有道理的。

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

像这样：

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

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

1 个答案: