第一次加載 Web 應用程式時，app.component會被呼叫并navigationbar #1顯示。現在，當用戶登錄時，我想從中加載navigationbar #2（app.component或讓app.componentUI 知道用戶已登錄），以便ng-template可以更新 UI 并設定navigationbar #2. 這是我在app.component.html檔案中的代碼
<div *ngIf="session === 'true'; else NoUserTemplete">
<app-app-navigation-bar-admin></app-app-navigation-bar-admin>
</div>
<ng-template #NoUserTemplete>
<app-navigation-bar></app-navigation-bar>
</ng-template>
app.component.ts檔案
constructor() {
this.session = localStorage.getItem('isloggedin')
}
下面的方法被呼叫，當用戶點擊登錄按鈕時login.component
UserLogin()
{
this.submitted = true;
if(this.loginForm.invalid)
{
localStorage.removeItem("isloggedin");
return
}
let data = { userName: this.loginForm.value.userName, txtemail:this.loginForm.value.txtEmail}
localStorage.setItem("userinfo", JSON.stringify(data));
localStorage.setItem('isloggedin','true');
this.router.navigate(['/home']);
}
基本上我需要的是，每當localStorage'sisloggedin variable發生變化時app.component都應該意識到這一點并更新 UI。我怎樣才能做到這一點 ？
uj5u.com熱心網友回復：
您可以構建一個服務來管理isLoggedIn本地存盤中的變數。該服務還可以公開當前保存在本地存盤中的任何內容。這樣做的好處是您還可以公開一些可觀察物件，您可以從任何有興趣知道此變數何時更改的組件（包括AppComponent）訂閱這些可觀察物件。
@Injectable({providedIn: 'root'})
export class LoginService {
private isLoggedInSource = new ReplaySubject<boolean>(1);
public isLoggedIn$: Observable<boolean>;
constructor() {
this.isLoggedIn$ = this.isLoggedInSource.asObservable();
// sync initial value
syncLoggedIn();
}
updateLoggedInStatus(isLoggedIn: boolean) {
localStorage.setItem('isloggedin', isLoggedIn ? 'true' : 'false');
syncLoggedIn();
}
}
private syncLoggedIn(): void {
this.isLoggedInSource.next(localStorage.getItem('isloggedin') === 'true');
}
然后在您的登錄組件中，您可以注入LoginService能夠更新全域isLoggedIn狀態的內容。
constructor(private loginService: LoginService) {}
UserLogin()
{
this.submitted = true;
if(this.loginForm.invalid)
{
this.loginService.updateLoggedInStatus(false);
return
}
let data = { userName: this.loginForm.value.userName, txtemail:this.loginForm.value.txtEmail}
localStorage.setItem("userinfo", JSON.stringify(data));
this.loginService.updateLoggedInStatus(true);
this.router.navigate(['/home']);
}
// in the logout method
// you also need to call this.loginService.updateLoggedInStatus(false);
在里面AppComponent你可以注入相同的服務來監聽變化。將您的session布??爾屬性改為可觀察的并使用async管道：
session$: Observable<boolean>;
constructor(private loginService: LoginService) {
this.session$ = loginService.isLoggedIn$;
}
最后，在應用組件的模板中，您可以使用session$帶有管道的 observableasync來決定顯示哪個工具列：
<div *ngIf="session$ | async; else NoUserTemplete">
<app-app-navigation-bar-admin></app-app-navigation-bar-admin>
</div>
<ng-template #NoUserTemplete>
<app-navigation-bar></app-navigation-bar>
</ng-template>
uj5u.com熱心網友回復：
您絕對應該為此使用服務。
筆記：
- 您可以在任何組件（例如 AppComponent）中注入此服務，然后使用
async管道檢查身份驗證狀態 - 我建議您只使用一個變數，
localStorage然后將其傳遞給isLoggedIn狀態（也作為可觀察的）
這是一個示例實作：
const USER_INFO_KEY = 'userinfo';
@Injectable({providedIn: 'root'})
export class AuthService {
private _userInfo$ = new BehaviorSubject<UserInfo | null>(
JSON.parse(localStorage.getItem(USER_INFO_KEY))
);
public userInfo$ = this._userInfo$.asObservable();
public isLoggedIn$ = this.userInfo$.pipe(
map((userInfo) => Boolean(userInfo))
);
setUserInfo(userInfo: UserInfo | null) {
localStorage.setItem(USER_INFO_KEY, JSON.stringify(userInfo));
this._userInfo$.next(userInfo);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/529097.html
標籤：有角度的打字稿