如何从另一个组件重新渲染特定组件模板？角 2

Posted 2023-02-22

【中文标题】如何从另一个组件重新渲染特定组件模板？角 2

【英文标题】：How to Re-render specific component template from another component? Angular 2

【发布时间】：2018-03-04 08:49:52

【问题描述】：

我正在尝试重新渲染一个 angular 2 html 模板，到目前为止，经过研究我发现我需要使用 NgZone。所以我在做什么，在我的主要组件中我调用导航栏组件，它调用 userdetails 组件。

在 userdetails 组件中显示用户详细信息，也就是名称和内容。我有另一个更改用户名称的组件。因此，当我更改名称时，导航栏上的名称（userdetails 组件）不会更改。

所以我在我的更改详细信息组件中尝试这种方式初始化一个 usedetails 组件并从中调用一个方法，初始化一个 ngZone 并调用 .run() 方法，在该方法中我用新名称更新 curretName ...并记录在控制台中。

所以当我在 http 完成后立即更新名称时，我在控制台中收到新名称，但在导航栏上名称仍然相同。

到目前为止，唯一的解决方案是重新加载窗口...但这对用户不友好，因为用户不会知道更改发生了什么。

所以我跳过了一些东西但是什么？

提前致谢！

【参考方案1】：

我认为尝试再次渲染您的组件并不是解决问题的好方法。您可以通过两种不同的方式解决它：

使用返回 Observable 的 Getter/Setter 服务，以便您可以通过 subscribe 对其进行更改并获得所需的更改。因此，您将在您的 user-details.component 上订阅它，并使用带有您的 navigation.component 的设置器设置一个新值。您可以在this article on Scotch.io by Jecelyn Yeen 上阅读更多信息。

使用 redux，因此，对于角度 ngrx/store 或 ngrx/platform，取决于您的角度版本。使用 redux，您将能够从您的组件将 subscribe 转换为 observable，调度新事件等等。实现您所需要的非常容易。看看redux 和我上面链接的演示。我强烈建议您在 youtube 上观看 Lukas Ruebbelke 的精彩演讲 this，并查看他的演示 here。

使用这两种方法，两种方式的数据绑定都可以完成这项工作，因此，每次您要更新组件的变量时，您都会在视图中看到新的数据。

【讨论】：

我很少看到这些指南，但我想我现在更加困惑了。我尝试了这个 ngDoCheck 但显然因为我在另一个组件中，该组件没有任何作用......即使我直接更改 curretName ，使用新的，也没有任何刷新它就像 userdetails 组件已经死亡并且它不再听任何东西，因为我们目前不在其中……我想要的只是某种方式来刷新它或让它再次加载……无需输入 window.location.reload() :(

我强烈建议你花一些时间来尝试理解一般的 rx 和 ngrx。看看我链接的视频。这很简单。