Question

我正在开发angular2应用程序。并得到一个关于数据共享的问题。我发现了许多教程如何在父＆lt; - ＆gt;子组件之间共享数据，但我还没有找到答案 - 如何将组件数据共享到同一级别的组件。在我的应用程序中，我使用ui-router-ng2显示主页面内容，我在其中呈现内容组件，如登录/注册，个人资料页面等。主app html文件：

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

想象一下ui-view显示登录组件的内容，成功登录后我必须将数据传递给带有用户信息的标题组件。我怎么能这样做？

Answer 1

您可以使用

创建服务

@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;
}

不要忘记OnInit的服务导入语句别忘了在app.module.ts中将服务添加到提供程序在Login组件中，您可以在服务中设置值。

this.ServiceName.valueToBeStored = whateverYouNeed

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

1 个答案: