将 Ngclass 与可观察对象一起使用
using Ngclass with obervables
我想知道使用可观察对象进行身份验证时的最佳做法是什么。
如果用户登录或未登录,我的代码部分需要呈现不同的代码。
目前我正在使用 "*ngIf="accountService.currentUser$ |异步”每次我需要根据登录状态区分代码。
可以使用 "*ngIf="accountService.currentUser$ | async" 在同一页面上多次或以不同方式处理?
我需要区分的地方之一是我想使用 [ngClass] 根据登录状态更改 CSS class。执行此操作的最佳方法是什么?
account.service.ts:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models/user';
@Injectable({
providedIn: 'root'
})
export class AccountService {
baseUrl = 'https://localhost:5001/api/';
private currentUserSource = new ReplaySubject<User | null>(1);
currentUser$ = this.currentUserSource.asObservable();
constructor(private http: HttpClient) { }
login(model: any) {
return this.http.post<User>(this.baseUrl + 'account/login', model).pipe(
map((response: User) => {
const user = response;
if (user) {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSource.next(user);
}
})
)
}
setCurrentUser(user: User) {
this.currentUserSource.next(user);
}
logout() {
localStorage.removeItem('user');
this.currentUserSource.next(null);
}
register(model: any) {
return this.http.post<User>(this.baseUrl + 'account/register', model).pipe(
map((user: User) => {
if (user) {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSource.next(user);
}
})
)
}
}
app.component.ts:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { User } from './_models/user';
import { AccountService } from './_services/account.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Admin Cockpit';
users: any;
isLoggedIn = true;
constructor(private http: HttpClient, public accountService: AccountService){}
ngOnInit() {
this.setCurrentUser();
}
setCurrentUser() {
const user: User = JSON.parse(localStorage.getItem('user')!);
this.accountService.setCurrentUser(user);
}
}
app.cmponent.html:
<app-preloader></app-preloader>
<ng-container *ngIf="accountService.currentUser$ | async" >
<app-nav></app-nav>
<app-sidebar></app-sidebar>
</ng-container>
<!-- Content Wrapper. Contains page content -->
<div [ngClass]="{'content-wrapper': isLoggedIn, 'content-wrapper-login': !isLoggedIn}">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Main</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<router-outlet></router-outlet>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<app-footer></app-footer>
我想我自己找到了可行的答案。
<div [ngClass]="{'content-wrapper': (accountService.currentUser$ | async) != null, 'content-wrapper-login': (accountService.currentUser$ | async) === null}">
似乎可以胜任。
我想知道使用可观察对象进行身份验证时的最佳做法是什么。 如果用户登录或未登录,我的代码部分需要呈现不同的代码。 目前我正在使用 "*ngIf="accountService.currentUser$ |异步”每次我需要根据登录状态区分代码。
可以使用 "*ngIf="accountService.currentUser$ | async" 在同一页面上多次或以不同方式处理?
我需要区分的地方之一是我想使用 [ngClass] 根据登录状态更改 CSS class。执行此操作的最佳方法是什么?
account.service.ts:
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { ReplaySubject } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../_models/user';
@Injectable({
providedIn: 'root'
})
export class AccountService {
baseUrl = 'https://localhost:5001/api/';
private currentUserSource = new ReplaySubject<User | null>(1);
currentUser$ = this.currentUserSource.asObservable();
constructor(private http: HttpClient) { }
login(model: any) {
return this.http.post<User>(this.baseUrl + 'account/login', model).pipe(
map((response: User) => {
const user = response;
if (user) {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSource.next(user);
}
})
)
}
setCurrentUser(user: User) {
this.currentUserSource.next(user);
}
logout() {
localStorage.removeItem('user');
this.currentUserSource.next(null);
}
register(model: any) {
return this.http.post<User>(this.baseUrl + 'account/register', model).pipe(
map((user: User) => {
if (user) {
localStorage.setItem('user', JSON.stringify(user));
this.currentUserSource.next(user);
}
})
)
}
}
app.component.ts:
import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { User } from './_models/user';
import { AccountService } from './_services/account.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'Admin Cockpit';
users: any;
isLoggedIn = true;
constructor(private http: HttpClient, public accountService: AccountService){}
ngOnInit() {
this.setCurrentUser();
}
setCurrentUser() {
const user: User = JSON.parse(localStorage.getItem('user')!);
this.accountService.setCurrentUser(user);
}
}
app.cmponent.html:
<app-preloader></app-preloader>
<ng-container *ngIf="accountService.currentUser$ | async" >
<app-nav></app-nav>
<app-sidebar></app-sidebar>
</ng-container>
<!-- Content Wrapper. Contains page content -->
<div [ngClass]="{'content-wrapper': isLoggedIn, 'content-wrapper-login': !isLoggedIn}">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0">Main</h1>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<section class="content">
<div class="container-fluid">
<router-outlet></router-outlet>
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->
</div>
<app-footer></app-footer>
我想我自己找到了可行的答案。
<div [ngClass]="{'content-wrapper': (accountService.currentUser$ | async) != null, 'content-wrapper-login': (accountService.currentUser$ | async) === null}">
似乎可以胜任。