Question

在我的app.component.html页面中，我使用导航栏设计了导航栏。它最初包含LOGIN按钮，但是当用户成功登录时，应该隐藏登录按钮

当前方法： 我在localstorage中基于boolean属性禁用了登录按钮，但是在这种情况下，直到刷新页面后，登录按钮才被禁用。

我的导航栏是作为共享组件创建的，那么有没有办法我可以基于页面添加新按钮并且可以在不刷新页面的情况下更新数据？

app.component.html：

<app-navbar></app-navbar>

  <router-outlet></router-outlet>

Navbar.component.html：

<mat-toolbar color="primary" class="mat-elevation-z">
  <span><mat-icon>post_add</mat-icon> ED-Planner</span>
  <div class="spacer">  </div>
    <button mat-button [routerLink]="['/user']">Home</button>
    <button mat-raised-button color="accent" [routerLink]="['/user/signup']">Signup</button>

</mat-toolbar>

任何帮助将不胜感激

Answer 1

好吧，用户数据通常存储在本地存储中。例如，如果您创建服务，则也可以在其中存储它并提供它（请确保它的providerIn根目录，因此只有一个实例）。

登录用户后，可以将其数据存储在服务或本地存储中（请注意安全性），您可以执行以下操作：

<ng-container *ngIf=isLoggedIn; else loggedOut>
 //Your content when the user is logged in), few else buttons for example profile or something
</ng-container>
<ng-template #loggedOut>
//your login section
</ng-template>

根据页面更改角度材质导航栏上的按钮

1 个答案: