在Angular 2中動態顯示/隱藏菜單欄

Question

我目前正在從事Angular 2項目。 我實現了兩個組件（1.標頭和2.顯示頁面內容）。 如果我打開服務，我將從登錄/注冊開始。 目前，我想隱藏所有其他菜單項。 如果我已登錄，則要顯示所有菜單項。

目前，我正在使用* ngIf來顯示和隱藏菜單項，實際上是有效的。 我的問題是，如果我啟動該頁面但未登錄，則菜單項不存在（這很好）。 但是，如果我登錄，只是具有頁面內容的容器會更改內容，而不是菜單欄...

目前，我以這種方式檢查是否登錄：

 <div *ngIf="user != null"> ...menu items... </div> 

如果重新加載整個頁面，此方法有效-但我認為應該有一種更好的方法來實時顯示/隱藏菜單項，而無需手動刷新？

您能幫我解決這個問題嗎？

Answer 1

您可能應該創建一個全局用戶服務，該服務跟蹤用戶狀態並且組件可以訂閱，以便始終獲得有關用戶登錄位置或不登錄位置的實時更新。

如果此時您不喜歡ngif解決方案，則可以選擇以下幾種方法：您可以創建一個全新的組件並將其顯示在僅當用戶登錄時才可訪問的路由中，或者可以執行諸如create的操作菜單項數組，用於控制導航菜單項並運行ngfor。

您需要回答更多問題的問題，例如您當前在哪里跟蹤用戶狀態（您的用戶變量）以及如何通知組件此變量發生變化？ 僅憑猜測，您可能是根據構造函數中的本地存儲或標題中的oninit函數設置用戶變量，然后將其保留。 這將導致它一次獲得用戶的值，但以后不會更新，這就是為什么它將在頁面刷新時正確顯示的原因。