Question

我正在尝试创建一个导航栏，该导航栏在用户已经登录时显示注销信息，反之亦然。但是按钮已经完全停止显示。

这让我很烦。我不知道我要去哪里错了。

我添加了app.component.ts文件。

auth.service.ts

import { Injectable } from '@angular/core';
import{HttpClient} from '@angular/common/http';
import{Router} from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private _registerUrl="http://localhost:3000/api/register";
  private _loginUrl="http://localhost:3000/api/login"
_router: Router;

  constructor(private http: HttpClient) { }
  registerUser(user){
    return this.http.post<any>(this._registerUrl, user)
  }
  loginUser(user){
      return this.http.post<any>(this._loginUrl, user)

  }
  loggedIn(){
    return !!(localStorage.getItem('token'))
  }
  logoutUser(){
   localStorage.removeItem('token')
    this._router.navigate(['/home'])

}
}

app.component.html

<div class="topnav" id="myTopnav">
    <a  class='nav-link' routerLink='/home' routerLinkActive="active">Home</a>
    <a  class='nav-link' *ngIf="!_authService.loggedIn()"routerLink='/register' routerLinkActive="active">Register</a>
    <a  class='nav-link' *ngIf="!_authService.loggedIn()" routerLink='/login' routerLinkActive="active">Login</a>
    <a  class='nav-link' style ="cursor:point" *ngIf="_authService.loggedIn()" (click)="_authService.logoutUser()" >Login</a>



    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
      <i class="fa fa-bars"></i>
    </a>
  </div>


  <script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
  </script>


<router-outlet></router-outlet>

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 = 'sams-attendance';
  constructor(private _auth: AuthService){}
}

Answer 1

问题是您要注入authService作为私有对象，模板只能访问公共方法，属性。

尝试将组件更改为：

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 = 'sams-attendance';

    constructor(public _auth: AuthService) {}
}

虽然这可行，但直接从模板调用服务可能不是最好的主意。

Answer 2

您的_authSerivice是未定义的，请检查您是否已将_authService传递给模板

相反，您应该直接在templte中使用logedIn

TypeError：无法读取未定义的属性“ loggedIn”

2 个答案: