Angular 4 个动态 headers 基于用户类型

Question

我正在尝试实现一个动态 header 组件，该组件会根据用户角色发生变化。

这是我的 header 组件

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
    currentUser:any;
  constructor(

  ) {
     this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 

  }

  ngOnInit() {

  }

}

这是我的 header 模板

<nav class="navbar navbar-default" >
 <div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav navbar-right">
    <li class="menu_item" *ngIf="!currentUser"><a [routerLink]="['/login']"> Login </a></li>
    <li class="menu_item" *ngIf="currentUser"><a [routerLink]="['/signin']">Logout</a></li>
  </ul>
</div>
</nav>

但问题是

登录后，header 文本没有变化（ not changing 登录 -> 注销）
注销后，header 文本未更改（未更改注销 -> 登录）
但如果我刷新页面，它会更改 header 文本。但不会随路线变化自动变化

谁能帮我解决这个问题？

Answer 1

请使用模板

  `  <ul class="navbar-nav">
                <ng-template #anonymousUser>
                  <li class="nav-item">
                    <a class="nav-link" routerLink="/login">Login</a>
                  </li>
                </ng-template>

                <li ngbDropdown *ngIf="appUser ;else anonymousUser " class="nav-item dropdown ">
                  <a ngbDropdownToggle class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    {{appUser.name}}</a>
                  <div ngbDropdownMenu class="dropdown-menu " aria-labelledby="dropdown01">
                    <a class="dropdown-item" routerLink="/my/orders">My Orders</a>
                    <ng-container *ngIf="appUser.isAdmin">
                      <a class="dropdown-item" routerLink="/admin/orders">Manage Order</a>
                      <a class="dropdown-item" routerLink="/admin/products">Manage Products</a>
                    </ng-container>

                    <a class="dropdown-item" (click)=logOut()>Log Out</a>
                  </div>
                </li>
              </ul>`

Answer 2

您需要让Header组件知道身份验证状态已更改。您可以为此使用可观察对象：

引入isAuthenticated$ observable inside AuthService
将该服务注入 Header 组件，并在模板中使用 isAuthenticated$，使用异步管道
记录 in/out 时，调用 next() 可观察对象以触发更改

像这样的东西应该可以完成工作：

class AuthService {

    isAuthenticated$ = new BehaviorSubject<boolean>(false);

    constructor() {
        const authenticated = !!JSON.parse(localStorage.getItem('currentUser')); 
        this.isAuthenticated$.next(authenticated);
    }

    login() {
        this.isAuthenticated$.next(true);
    }

    logout() {
        this.isAuthenticated$.next(false);
    }

}

Header 组件控制器：

class HeaderComponent implements OnInit {

  public currentUser: any;
  public isAuthenticated$ = this.auth.isAuthenticated$;

  private (private auth: AuthService) {}

  ngOnInit() {
    this.isAuthenticated$.subscribe(authenticated => {
      if (authenticated) {
        this.currentUser = JSON.parse(localStorage.getItem('currentUser')); 
      } else {
        this.currentUser = null;
      }
    });
  }

}

您的模板：

<nav class="navbar navbar-default" >
  <div class="collapse navbar-collapse" id="myNavbar">
    <ul class="nav navbar-nav navbar-right">
      <li class="menu_item" *ngIf="!(isAuthenticated$ | async)"><a [routerLink]="['/login']"> Login </a></li>
      <li class="menu_item" *ngIf="(isAuthenticated$ | async) && currentUser.someField === 'someValue'"><a [routerLink]="['/signin']">Logout</a></li>
    </ul>
  </div>
</nav>

Angular 4 个动态 headers 基于用户类型

Angular 4 dynamic headers based on user type

typescript

angular-ng-if

angular