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

【问题标题】：Change the buttons on the angular material Nav-bar based on page根据页面更改角材质导航栏上的按钮
【发布时间】：2020-12-22 06:46:38
【问题描述】：

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

目前的做法： 我正在根据本地存储中的布尔属性禁用登录按钮，但在这种情况下，登录按钮在我刷新页面之前不会被禁用。

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

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>

任何帮助将不胜感激

【问题讨论】：

标签： html css angularjs angular angular-material

【解决方案1】：

嗯，用户数据通常存储在本地存储中。例如，如果您创建一个服务，您也可以将它存储在那里，并提供它（确保它的提供在根目录中，这样只会有 1 个实例）。

用户登录后，可以将其数据存储在服务或本地存储中（请注意安全），可以这样做：

<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>

【讨论】：