Question

我正在使用rxjs BehaviorSubject来允许我的登录页面将数据传递给auth.service.ts，我的app.component能够检索auth.service.ts中的数据。但我希望app.component能够检测auth.service.ts中数据的更改，并根据auth.service.ts中的数据更改导航

这是我的app.component.html

<h1 class="logo">Fast Pay</h1>
<nav class="navbar">
  <ul class="nav" *ngIf="isOwner">
  <li><a routerLink="/home" >Home</a></li>
  <li><a routerLink="/payment">Payment</a></li>
  <li><a routerLink="/transfer">Money Transfer</a></li>
  <li><a routerLink="/history">Transaction History</a></li>
  <li><a routerLink="/manage-sub-acc">Manage Sub Account</a></li>
  <li style="float:right"><a routerLink="/home">Logout</a></li>
  </ul>

  <ul class="nav" *ngIf="isCustomer">
    <li><a routerLink="/home" >Home</a></li>
    <li><a routerLink="/payment">Payment</a></li>
    <li><a routerLink="/transfer">Money Transfer</a></li>
    <li><a routerLink="/history">Transaction History</a></li>
    <li class="nav"><a class="nav" routerLink="/add-amount">Top-up</a></li>  
    <li style="float:right"><a routerLink="/home">Logout</a></li>
  </ul>    

      <li class="nav" style="float:right"><a class="nav" routerLink="/registration">Registration</a></li>  
      <li class="nav" style="float:right"><a class="nav" routerLink="/login">Login</a></li>
    </ul>    

  <ul class="nav" *ngIf="!isCustomer && !isOwner">
  <li class="nav"><a class="nav" routerLink="/home" >Home</a></li>
  <li class="nav"><a class="nav" routerLink="/login">Payment</a></li>
  <li class="nav"><a class="nav" routerLink="/login">Money Transfer</a></li>
  <li class="nav"><a class="nav" routerLink="/login">Transaction History</a></li>
  <li class="nav"><a class="nav" routerLink="/login">Top-up</a></li>
  <li class="nav" style="float:right"><a class="nav" routerLink="/registration">Registration</a></li>  
  <li class="nav" style="float:right"><a class="nav" routerLink="/login">Login</a></li>

  </ul>
</nav>
<div class="container">
  <div class="row">
    <router-outlet></router-outlet>
  </div>
</div>

这是我的app.component.ts

import { Component } from '@angular/core';
import { AuthService } from './auth.service';

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

  public email:string = "";
  public accType:string = "";
  isOwner = false;
  isCustomer = false;


  constructor(private auth: AuthService) {
    if(this.email=="default@email.com"){
      this.isOwner = false;
      this.isCustomer = false;   

    }
    if(this.email!="default@email.com"){
      if(this.accType == "customer"){
        this.isCustomer = true;      
      }
      else if(this.accType == "owner"){
        this.isOwner = true;              
      }
    }

  }
  ngOnInit() {
    this.auth.currentEmail.subscribe(email => this.email = email);    
    this.auth.currentaccTyoe.subscribe(type => this.accType = type);

  }

Answer 1

我会在您的身份验证服务中添加一个BehaviorSubject，然后让您的app.component订阅BehaviorSubject，以便在用户登录时通知app.component。

// auth.service.ts
userChange$ = new BehaviorSubject({email: null, accType: null});

// call this when a user logs in so all subscribers of userChange$ will be notified
loggedIn(email, accType){
    this.userChange$.next({
        email: email,
        accType: accType
    });
}

然后在app.component中订阅userChange $以监听更改

// app.component.ts
ngOnInit(){
    this.authService.userChange$.subscribe(res => {
        if(res.email=="default@email.com") {
            res.isOwner = false;
            res.isCustomer = false;   
        }
        if(res.email!="default@email.com") {
            if(res.accType == "customer") {
                this.isCustomer = true;      
            } else if(res.accType == "owner") {
                this.isOwner = true;              
            }
        }
    });
}

根据Angular中的用户隐藏和显示导航栏

1 个答案: