时间戳

首页 > 解决方案 > Angular9更新变量以在加载内容后显示/隐藏HTML

html - Angular9更新变量以在加载内容后显示/隐藏HTML

问题描述

加载组件后如何显示/隐藏 HTML 内容？

我正在尝试在标题工具栏上显示/隐藏一个按钮，该按钮会根据登录状态而变化。

下面的工具栏组件被加载到主页中。由于该组件是在主页上加载的，因此它永远不会再次重新加载。当我登录时，我想相应地显示和隐藏那个 ion-buttons 部分。

登录后，我在工具栏组件类中调用了getAndSetLogin() 函数，控制台日志显示loggedIn=true，现在应该隐藏登录部分，但不会显示/隐藏。

工具栏组件 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;
    });
  }

工具栏组件文件中的上述代码在我登录时触发，现在它只是提供程序中的一个按钮，它设置返回一个可观察的 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 一次，正因为如此，ngIf 语句只有在你在 onInit 或构造函数中更改它们时才有效。

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

标签： htmlangulartypescriptionic-frameworkionic5

解决方案

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

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);
   });
}

我希望这会对你有所帮助。谢谢。

推荐阅读