时间戳

首页 > 解决方案 > 将 Ngclass 与 obervable 一起使用

angular - 将 Ngclass 与 obervable 一起使用

问题描述

我想知道什么是可观察的身份验证时的最佳实践。如果用户未登录，我的代码部分需要呈现不同的代码。目前我正在使用 "*ngIf="accountService.currentUser$ | 异步”每次我需要根据登录状态区分代码时。

可以使用 "*ngIf="accountService.currentUser$ | async”在同一页面上多次或以不同方式处理？

我需要区分的地方之一是我想使用 [ngClass] 根据登录状态更改 CSS 类。最好的方法是什么？

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>

标签： angularobservableng-class

解决方案

我想我自己找到了一个可行的答案。

<div [ngClass]="{'content-wrapper': (accountService.currentUser$ | async) != null, 'content-wrapper-login': (accountService.currentUser$ | async) === null}">

似乎完成了这项工作。

推荐阅读