制作按钮等待方法解决答案

【问题标题】：Make button to wait for mehtod to resolve制作按钮等待方法解决
【发布时间】：2022-01-09 19:50:38
【问题描述】：

我有几个按钮，我只想在用户登录时才显示。我的问题是简单的 *ngIf 没有像我想要的那样工作。例如我有这个按钮添加食谱：

<div class="background">
<button type="button" *ngIf="isUserAuthenticated" class="btn btn-primary float-right m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" 
(click)="addClick()" 
data-backdrop="static" 
data-keyboard="false">
    Add Coffee
  </button>

是显示模态的按钮。我希望仅在用户通过身份验证时才显示该按钮。这就是我的 .ts 的样子：

export class RecipeDetailsComponent implements OnInit {
  ...
  public isUserAuthenticated: boolean = false;

 ngOnInit(): void {
this.userService.authChanged
    .subscribe(res => {
      this.isUserAuthenticated = res;
    })
}

和我的 userService 检查是否通过身份验证的方法：

export class UserService {
  private _authChangeSub = new Subject<boolean>()
  public authChanged = this._authChangeSub.asObservable();
  
public sendAuthStateChangeNotification = (isAuthenticated: boolean) => {
    this._authChangeSub.next(isAuthenticated);
  }
  public isUserAuthenticated = (): boolean => {
    const token = localStorage.getItem("token");
 
    return token != null && this._jwtHelper.isTokenExpired(token) == false;
  }

仅当我在声明时设置 isUserAuthenticated = true 时才会出现按钮，如果它为 false 则隐藏。我猜按钮读取 isUserAthenticated 属性并在 ngOnInit 之前显示它自己。如何延迟按钮显示直到 ngOnInit 解决或之后刷新？

【问题讨论】：

标签： javascript html angular

【解决方案1】：

如果我理解您的问题，您会因为时间问题而遇到麻烦。您的代码不包括值何时或如何更改，但我猜测该值在您的组件初始化之前已更改，因此您订阅晚了？

如果是这样，我建议更改

private _authChangeSub = new Subject<boolean>()

到

private _authChangeSub = new ReplaySubject<boolean>(1);

这样，即使在值发出后订阅，组件仍然会收到该值。见https://www.learnrxjs.io/learn-rxjs/subjects/replaysubject

【讨论】：

好的，非常感谢！这就是我需要的