Angular 2全局變量

我想設置一個全局服務，可以通過所有的組件訪問，正是我希望使用此服務存儲用戶相關信息，如角色，名稱等，並在以後的所有組件中使用它Angular 2全局變量

我嘗試過使用singleton，但在瀏覽器刷新後，它已經清除了。

如何實現這個任何指導將不勝感激。

所述單獨服務是這樣的：

export class Principal{ 
    private isAuthenticated: boolean = false; 
    private roles: Array<String>; 
    private fullName: String; 
    constructor(){} ; 
    // getter and setter 

}

來源

2016-06-08 4rpit

如果要在瀏覽器刷新後繼續存在，您需要讓服務單例將其狀態保存在瀏覽器持久性存儲中。將你的一些單身代碼添加到你原來的問題中，我將用代碼保存其狀態sessionStorage;

UPDATE

我們可以用angular2-localStorage模塊來實現這一目標。

export class Principal{ 
    @SessionStorage() private isAuthenticated: boolean = false; 
    @SessionStorage() private roles: Array<String>; 
    @SessionStorage() private fullName: String; 
    constructor(){} ; 
    // getter and setter 
}

請注意

不要在這裏存儲任何敏感值。您的後端API不應該信任任何這些值，因爲最終用戶可以輕鬆更改這些值。

對於idomatic typescript，您應該更喜歡get和set訪問器，而不是getter和setter方法。

來源

2016-06-08 09:34:48 Martin

添加服務代碼 – 4rpit

最終用戶如何更改這些值？ – vigamage

@vigamage - 在給出的示例中，用戶可以在應用運行時打開調試控制檯並輸入'sessionStorage.setItem（'roles'，'admin'）;'來更改值。這就是爲什麼瀏覽器中沒有東西可以被信任的原因。僅僅因爲Angular應用程序現在認爲用戶是「管理員」 - 支持API的應用程序在調用管理API時應該會引發錯誤。 – Martin

此相應的服務提供商必須自舉應用程序時或指定的主要成分的providers屬性中。

bootstrap(AppComponent, [ GlobalService ]);

或

@Component({ 
    (...) 
    providers: [ GlobalService ] 
}) 
export class AppComponent { 
}

這樣，所有組件將共享相同的服務實例。

來源

2016-06-08 09:29:00

有什麼辦法可以避免在每個文件的頂部寫'import x from y'嗎？我想要lodash作爲一個全局變量。 – GFoley83

Angular 2全局變量

回答

相關問題