加载内容后，Angular 9 将变量更新为 show/hide HTML

Question

组件加载后如何show/hideHTML内容？

我正在尝试 show/hide 页眉工具栏上的一个按钮，该按钮会根据登录状态而变化。

主页中加载了下面的工具栏组件。由于该组件已加载到主页上，因此它永远不会再次重新加载。当我登录时，我想相应地显示和隐藏该离子按钮部分。

登录后，我在我的工具栏组件中调用了 getAndSetLogin() 函数 class，控制台日志显示 loggedIn=true，现在应该隐藏登录部分，但没有 show/hide.

工具栏组件HTML

<ion-header>
  <ion-toolbar>
    // Hide this button if logged in
    <ion-buttons *ngIf="!loggedIn" slot="end">
      <ion-button (click)="showLoginPopover($event)">
        <ion-label class="header-toolbar-text btn-label">Log In</ion-label>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

(Toolbar Component.ts) 更新工具栏组件登录状态的函数

  public getAndSetLoginState() {
    this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
      // loggedInState is either true or false, true if logged in and false otherwise
      this.loggedIn = loggedInState;
    });
  }

以上来自工具栏组件文件的代码在我登录时被触发，现在它只是提供者中的一个按钮，它将 returns 可观察值设置为 true。

我试过添加 ChangeDetectorRef，例如

  // Get an observable of the login state
  public getAndSetLoginState() {
    this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
      this.loggedIn = loggedInState;
      this.cd.markForCheck();
      // cd = ChangeDetectorRef initliased in the constructor
    });
  }

但这也没有检测到我的更改。

我是否更正 Angular 仅加载 HTML 一次，因此，只有在 onInit 或构造函数中更改它们时，ngIf 语句才有效。

如何根据登录状态show/hide内容。我听说过使用 RXJS BehaviourSubject 但不确定这会有什么帮助。

Answer 1

您需要为此创建一个 Observable。创建一个 UserService 服务 class 并在其中创建 BehaviourSubject 对象。在成功登录时设置它的值。

像这样：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class UserService {
    private isLoggedIn: BehaviorSubject<boolean>;
    constructor() {
        this.isLoggedIn = new BehaviorSubject<boolean>(false);
    }
    
    setUserLoggedInStatus(value) {
        this.isLoggedIn.next(value);
    }

    getUserLoggedInStatus(): Observable<any> {
        return this.isLoggedIn.asObservable();
    }
}

现在在您的组件 class 中，像这样订阅 getUserLoggedInStatus() 函数：

import { Component, OnInit } from '@angular/core';
import { UserService } from '@app/shared/services/user.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  isLoggedIn: Boolean;
  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUserLoggedInStatus().subscribe((status)==> {
        this.isLoggedIn = status;
    });
  }
}

Answer 2

您可以在 UserService 文件中保存 loggedInState。

export class UserService{
    private logingData;
    private loggedIn = false;

  constructor(
    private http: HttpClient,
  ) { }

  login(){
    this.logingData= this.http.post(-call your server-);
    return this.logingData;
    this.loggedIn = this.logingData.status;
  }
}

然后将 loggedIn 变量绑定到工具栏。

在html

<ion-buttons *ngIf="!userService.loggedIn" slot="end">

在 ts

import { UserService} from "your location";

constructor(public userService: UserService){}

然后从Popover组件调用这个方法

public getAndSetLoginState() {
   this.userService.checkedLoggedInStatus().subscribe((loggedInState: any) => {
       console.log(loggedInState);
   });
}

希望这对you.Thank你有帮助。

Answer 3

在这种情况下使用BehaviourSubject。

服务文件：

import { Observable, BehaviorSubject } from 'rxjs';
 export class UserService {
   private isLoggedIn: BehaviorSubject<boolean>(false);
   private _isLoggedIn$ = new BehaviorSubject<boolean>(false);
   readonly isLoggedIn$ = this._isLoggedIn$.asObservable();
     
   getLoggedInStatus(): Observable<any> {
       return this.http.get<any>(url, params).pipe(
          map((res) => {
            this._isLoggedIn$.next(res);
             ..... // other logics here
       })
     );
    }
  }

组件：

loggedInState$:Observable<any>;
this.loggedInState$ = this.userService.isLoggedIn$();

HTML：（使用异步管道）

<ion-buttons *ngIf="!loggedInState | async" slot="end">

Answer 4

S Rana 的回答几乎有效，我正在发布更改以使其有效

服务文件：

import { Observable, BehaviorSubject } from 'rxjs';
        export class UserService {
          private isLoggedIn: BehaviorSubject<boolean>(false);
          private _isLoggedIn$ = new BehaviorSubject<boolean>(false);
          isLoggedIn$ = this._isLoggedIn$.asObservable();
            
          getLoggedInStatus(): Observable<any> {
              return this.http.get<any>(url, params).pipe(
                 map((res) => {
                   this._isLoggedIn$.next(res);
                    ..... // other logics here
              })
            );
           }
         }

组件：

loggedInState$:Observable<boolean>;

this.userService.loggedInChanged$.subscribe((data: any) => {
  this.loggedInState$ = data;
  }
);

HTML:

<ion-buttons *ngIf="!loggedInState$" slot="end">

加载内容后，Angular 9 将变量更新为 show/hide HTML

Angular9 Update variable to show/hide HTML after content is loaded

html

typescript

ionic-framework

angular

ionic5