Angular2如何看全球的服務財產？

我一直在玩Angular2幾天，現在我真的很喜歡它。但我似乎無法繞過我的腦袋。Angular2如何看全球的服務財產？

我有一個類userService 2個功能（我刪除了大部分邏輯。），其改變IsLoggedIn屬性：

@Injectable() 
export class UserService{ 
    public IsLoggedIn:bool = false 

    login(){ 
     this.IsLoggedIn = true; 
    } 
    logout(){ 
     this.IsLoggedIn = false; 
    } 
}

我要顯示和隱藏在我的全局視圖取決於IsLoggedIn財產的一些元素。做這個的最好方式是什麼？

來源

2016-08-18 Mike Bovenlander

在Angular 2 rc.5

在AppComponent提供服務，因此將作爲無處不在一個單：

// https://angular.io/docs/ts/latest/guide/ngmodule.html#!#ngmodule-properties 
@NgModule({ 
    imports: [...], 
    declarations: [...], 
    providers: [UserService], 
    bootstrap: [AppComponent] 
}) 
export default class AppModule {}

在需要訪問該服務的組成部分，注入它，然後使用它

import {UserService} from '...'; 
... 
//inject service into the constructor 
constructor(private userSvc:UserService){} 
... 
//to login 
this.userSvc.login();

你也可以訪問該服務在該組件的模板

<div *ngIf="userSvc.isLoggedIn">Protected data </div>

附錄：

如果你想在用戶註銷一切自動更新，而不是指一個布爾userSvc.isLoggedIn，指的是目的。

UserService

state = { 
    loggedIn:false, 
    ... //other states of the user (eg: permissions, preferences) 
}; 

logout(){ this.state.loggedIn = false } 
login() { this.state.loggedIn = true }

然後在你的組件模板

<div *ngIf="userSvc.state.loggedIn"> Protected data </div>

這工作，因爲所有引用到相同state對象在內存中，而在原來的實現，你複製的值爲isLoggedIn。請記住：爲了在應用範圍內使用此功能，請僅提供AppModule的服務。請勿將其包含在任何其他模塊或組件的providers陣列中。

來源

2016-08-18 07:29:02 BeetleJuice

嗨陰間大法師將其綁定，userSrv.IsLoggedIn沒有得到當有人點擊註銷時更新。我會用Günter建議的Observables來嘗試它。謝謝你的回答！ –

@Mike當然你可以做到這一點。一個更簡單的解決方案利用了以下事實：（1）當值本身改變（使用它的內部可觀察對象）和（2）對象在JavaScript中通過引用傳遞時，Angular更新應用程序。看看我添加到我的答案。 – BeetleJuice

@Mike你還需要確保你在我的答案中不要跳過第1步。該服務只能由'AppModule'提供。不要將它包含在任何其他模塊的「提供者」數組中。否則，您將並行運行不同的服務實例，並使用不同的狀態。 – BeetleJuice

注入服務到您要取決於isLoggedIn財產

constructor(this.userService:UserService)

<div *ngIf="userService.IsLoggedIn"> 
    content when logged in 
</div> 
<div *ngIf="!userService.IsLoggedIn"> 
    content when not logged in 
</div>

更妙的是可觀察到的，而不是一個布爾值，顯示/隱藏內容的組件。由於觀察對象主動通知變化，所以變更檢測效率更高。欲瞭解更多詳情，請參閱https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

來源

2016-08-18 07:29:12

userService.isLoggedIn沒有像這樣在視圖中更新。觀察者會這樣做嗎？ –

當然可以。聽起來就像你多次提供服務，組件獲得一個新的（不同的）實例，而不是你更新值的實例。 Angular DI爲每個提供程序創建一個新實例。 –

好吧，我會看看它。我會及時向大家發佈。感謝Günter！ –

你剛剛注入UserService到每個組件

constructor(public userService:UserService) { 
}

，你想使用它，通過

<div *ngIf="userService.IsLoggedIn">hello world</div>

來源

2016-08-18 07:29:13

嗨奧利弗，謝謝你的回答！當我在我的視圖中使用userService.IsLoggedIn時，當有人單擊註銷時它不會更新。我會用Günter建議的Observables來嘗試它。 –

嗨邁克，感謝您的回答。線索是你需要在你的應用程序組件中提供它，而不是在每個單獨的組件中。那麼所有3個提供的解決方案將工作 –

Angular2如何看全球的服務財產？

回答

相關問題