如何从另一个组件重新呈现特定的组件模板? Angular 2

时间:2017-09-22 17:41:33

标签: angular rerender

我试图重新渲染一个有角度的2 html模板,到目前为止研究后我发现我需要使用NgZone。所以我正在做的事情,在我的主要组件中,我调用导航栏组件,它调用userdetails组件。

在userdetails组件中显示用户详细信息,即名称和内容。我有另一个组件,它改变了用户的名字。因此,当我更改名称时,导航栏上的名称(userdetails组件)不会更改。

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

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

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

所以我跳过了什么而不是什么?

提前致谢!

1 个答案:

答案 0 :(得分:1)

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

  • 使用返回Observable的Getter / Setter服务,以便您subscribe可以获得所需的更改。因此,您可以在user-details.component上订阅,只需使用带有navigation.component的setter设置新值。您可以在this article on Scotch.io by Jecelyn Yeen上阅读更多内容。

  • 根据您的角度版本,对于角度ngrx/storengrx/platform使用redux。使用redux,您可以从组件中subscribeobservable,发送新事件等。实现您的需求非常容易。看一下redux以及我上面链接的演示。我强烈建议你在youtube上观看Lukas Ruebbelke的this精彩演讲并查看他的演示here

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