时间戳

首页 > 解决方案 > 导航栏选项中的简单显示隐藏功能，用于以角度登录和注销。我想知道为什么它不起作用

angular - 导航栏选项中的简单显示隐藏功能，用于以角度登录和注销。我想知道为什么它不起作用

问题描述

登录后我无法显示该功能。我没有使用会话存储来获取用户。我还没有完成注销功能。

用于导航的 HTML

<nav class="navbar navbar-expand-sm navbar-light bg-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a *ngIf = "!invalidLogin" class="nav-link" routerLink="create">Add New Music</a>
                    {{!invalidLogin}}
                </li>
                <li class="nav-item">
                    <a *ngIf = "!invalidLogin" class="nav-link active" routerLink="list">Manage Items</a>
                </li>
                <li class="nav-item">
                    <a *ngIf = "!invalidLogin" class="nav-link" routerLink="customerlist">Manage Customers</a>
                </li>
            </ul>

            <ul class="navbar-nav navbar-collapse justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" routerLink="addcustomer">SignUp</a>
                </li>
                <li class="nav-item">
                    <a *ngIf = "invalidLogin" class="nav-link" routerLink="login">Login</a>
                </li>
            </ul>
        </nav>

我尝试调用 this.invalidLogin = true; 在 ngOnit() 中，但它不起作用。

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {

  invalidLogin: boolean = true;

  constructor() { }

  ngOnInit(): void {
    // this.invalidLogin = true;
  }

}

我试图显示/启用功能的服务类，虽然它设置属性 this.nav.invalidLogin = false，但它没有反映在导航组件中。在这里，我在构造函数中注入 NavigationComponent。在 app.module.ts 中，我在提供程序中提供了 NavigationComponent。

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

  username: string = "divya@gmail.com";
  password: string = "divya123";




  constructor(private http: HttpClient, private nav: NavigationComponent, private router: Router) { }


  doLogin(user: Login){
    let temp = false;
    if((user.username === this.username) && (user.password === this.password)){
      this.nav.invalidLogin = false;
      temp = true;
    }else{
      temp = false;
      // this.message = "Invalid Credientials"
    }
    return temp;
  }
}

最后是登录组件，我在其中调用用于设置属性 this.nav.invalidLogin = false 的服务类。


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  login: Login;
  message: string;

  constructor(private router: Router, private nav : NavigationComponent, private custService: CustomerService) { }

  ngOnInit(): void {
    this.login = new Login();
    
  }

  

  doLogin(user: Login){
    if(this.custService.doLogin(user)){
      console.log("Invalid user : ",this.nav.invalidLogin);
      this.router.navigate(["list"]);
    }else{
      this.message = "Invalid Credientials"
    }
  }

}

标签： angulartypescriptangular-components

解决方案

我建议使用 observables。这将允许即时更新您的值。

我已经简化了您的代码，以便您只看到最需要的部分（删除类和类中不需要的导入）。

这是我将为您的 HTML 做的事情

<nav>
  <!-- This subscribes to your new class level observable value -->
  <!-- This is for the value being true - meaning the login is NOT invalid -->
  <ul *ngIf="!(invalidLogin | async)">
    <li>
      <a>Add New Music</a>
      - {{invalidLogin | async}}
    </li>
    <li>
      <a>Manage Items</a>
    </li>
    <li>
      <a>Manage Customers</a>
    </li>
  </ul>

  <!-- This subscribes to your new class level observable value -->
  <!-- This is for the value being true - meaning the login IS invalid -->
  <ul *ngIf="(invalidLogin | async)">
    <li>
      <a>SignUp</a>
    </li>
    <li>
      <a>Login</a>
    </li>
  </ul>
</nav>

这是您的组件的外观

export class NavigationComponent implements OnInit {
  // Setting up our class level variable to watch in the template.
  invalidLogin: Observable<boolean>;

  // Dependency injecting your service.
  constructor(private customerService: CustomerService) {}

  ngOnInit(): void {
    // This is calling your service with BAD data.
    this.invalidLogin = this.customerService.doLogin({
      username: "divya@gmail.com",
      password: "not-matching"
    });
  }
}

最后是您的服务

import { Injectable } from "@angular/core";
import { Observable, of } from "rxjs";

@Injectable({
  providedIn: "root"
})
export class CustomerService {
  username: string = "divya@gmail.com";
  password: string = "divya123";

  // Typing your doLogin method to return an observable of boolean
  doLogin(user: any): Observable<boolean> {
    if (user.username === this.username && user.password === this.password) {
      // This returns an observable of true if they were to match
      return of(false);
    }
    // This returns an observable of false if they don't match
    return of(true);
  }
}

我建议的可读性：将您的组件类级别变量重命名invalidLogin为validLogin. 这将允许您的模板没有双重否定 - 这似乎会让更多人感到困惑。如果您进行此更改，请不要忘记翻转模板中的那些“！”！我强烈建议进行此更改。

推荐阅读