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

【问题标题】：How to re-render an included component on click function?如何在点击功能上重新渲染包含的组件？
【发布时间】：2018-03-24 11:20:49
【问题描述】：

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

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

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

我该怎么办？

【问题讨论】：

您确定该模板正确吗？结束标签 app-branch-detail 与开始标签 app-detail 不匹配
能不能给个编辑方法
从[(visible)]数据绑定来看，它不会破坏/创建app-detail组件，而是隐藏和显示。因此，app-detail 组件只呈现一次是有道理的。
编辑方法并不重要。问题是我想在每次呈现对话框时传递一个 id 并刷新 app-detail 组件。

标签： angular components rendering primeng primeng-dialog

【解决方案1】：

从[(visible)]对话框数据绑定来看，它并没有销毁/创建<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>

【讨论】：