将登录按钮更改为角13中的注销。

Question

我有一个有两个按钮的简单列表。我希望能够显示其中一个或另一个取决于我是否登录。

<div>
                <li class="nav-item">
                  <button *ngIf="token === ''" type="button" class="btn btn-dark btn-lg fs-4" (click)="login()">Inicia sesión</button>
                  <button *ngIf="token != ''" type="button" class="btn btn-dark btn-lg fs-4" (click)="logout()">Cerrar sesión</button>
                </li>
              </div>

我尝试简单地放置ngIf，但它并没有使它即时，此外，由于登录在另一个组件中，我真的不知道如何从那里改变它。

这是我的组成部分：

import { Component, ElementRef, ViewChild} from '@angular/core';
import { Router } from '@angular/router';
import { faHamburger } from '@fortawesome/free-solid-svg-icons';
import { UsersService } from './services/user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  token = this.userService.getToken();

  @ViewChild('clickLogout')clickLogout:ElementRef;

  faHamburger = faHamburger;

  constructor(public userService: UsersService, public router: Router) { }
  
  logout(){
    this.userService.logout();
    
    this.router.navigateByUrl('/login');
  }

  login(){
    this.router.navigateByUrl('/login');
  }
  
}

因此，每当我需要一个按钮或另一个按钮时，我都需要重新加载页面，当我登录或退出时，我需要它立即重新加载页面。

Answer 1

试着在html中使用，

<div *ngIf="token === ''; else empty">
      <button type="button" class="btn btn-dark btn-lg fs-4" 
       (click)="login()">Inicia 
       sesión</button>
    </div>

    <ng-template #empty>
     <button type="button" class="btn btn-dark btn-lg fs-4" 
      (click)="logout()">Cerrar sesión</button>
    </ng-template>

在ts中，调用ngOnInit方法中的令牌并更改路由(导航时/login为/logout )：

export class AppComponent implements OnInit {
//code...
token=''
ngOnInit(): void {
this.token = this.userService.getToken();}

Answer 2

您应该使用BehaviorSubject在服务中存储令牌，添加：

public token$ = new BehaviorSubject<string>(null);

然后，当您收到令牌值时使用this.token$.next(valueFromRequest);，并使用this.token$.next(null);重置它。

在html代码中，以这种方式使用ngIf：

<button *ngIf="(userService.token$ | async)" type="button" [...]>Logout</button>
<button *ngIf="!(userService.token$ | async)" type="button"[...]>Login</button>