Angular2：將任何數據共享到同一級別的組件

-1

我正在開發angular2應用程序。還有一個關於數據共享的問題。我發現很多教程如何在父級< - >子組件之間共享數據，但是我還沒有找到有關問題的答案 - 如何將數據共享到同一級別的組件上。在我的應用我使用的UI路由器，NG2其中i呈現內容組件，如登錄/時，個人資料頁等主要應用HTML文件來顯示主要內容頁：Angular2：將任何數據共享到同一級別的組件

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

想象一下，在用戶界面視圖顯示登錄組件，成功登錄後，我必須將數據傳遞給包含用戶信息的頭部組件。我怎麼能這樣做？

來源

2016-11-09 elpofigisto

對於登錄和持久用戶信息我建議使用一次實例化的服務（比如在你的根模塊中）然後注入。 – 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

來源

2016-11-09 22:20:24

這部分對我來說很明顯，但對於頭部組件，ngOnInit只在第一次加載頁面時才工作1次。我對所有頁面都有一個標題，我沒有爲登錄的用戶使用其他標題，只隱藏/顯示用戶名和註銷鏈接。 – elpofigisto

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

Angular2：將任何數據共享到同一級別的組件

回答

相關問題