Angular2：将任何数据共享到同一级别的组件

问题描述：

我正在开发angular2应用程序。还有一个关于数据共享的问题。我发现很多教程如何在父级< - >子组件之间共享数据，但是我还没有找到有关问题的答案 - 如何将数据共享到同一级别的组件上。在我的应用我使用的UI路由器，NG2其中i呈现内容组件，如登录/时，个人资料页等主要应用HTML文件来显示主要内容页：Angular2：将任何数据共享到同一级别的组件

<header-app></header-app> 
<div class="main-container container"> 
    <ui-view></ui-view> 
</div>

想象一下，在用户界面视图显示登录组件，成功登录后，我必须将数据传递给包含用户信息的头部组件。我怎么能这样做？

对于登录和持久用户信息我建议使用一次实例化的服务（比如在你的根模块中）然后注入。 – silentsod

@silentsod你能提供任何例子吗？你是什么意思？你的意思是创建单件服务什么将存储数据并注入到所需的组件？ – elpofigisto

答

您可以创建

@Injectable() 

export class ServiceName { 
    public valueToStore: datatype //whatever you need 


}

服务注入服务到您需要

private valueToBeShared: datatype; 
export class Example implements OnInit { 
    constructor(private serviceName: ServiceName); 


ngOnInit(){ 
    this.valueToBeShared = this.serviceName.valueToStore; 
}

不要之间共享数据忘记服务import语句的OnInit的不要忘记添加组件该服务提供给app.module.ts 并在Login组件中设置服务中的值。

this.ServiceName.valueToBeStored = whateverYouNeed

这部分对我来说很明显，但对于头部组件，ngOnInit只在第一次加载页面时才工作1次。我对所有页面都有一个标题，我没有为登录的用户使用其他标题，只隐藏/显示用户名和注销链接。 – elpofigisto

我找到了解决方案：http://plnkr.co/edit/XqwwUM44NQEpxQVFFxNW?p=preview – elpofigisto

Angular2：将任何数据共享到同一级别的组件

相关推荐