错误TypeError：_co.getAdmin不是函数

Question

这是一个Angular应用程序，并且auth.service中的功能getAdmin（）有点问题，但是我不知道是什么。当我将此函数移至app.component.ts并在html中更改为“ getAdmin（）”时，没关系，但是我需要在服务中使用此函数。请告诉我哪里出了问题以及如何解决。

PS。 'admin'在字符串中返回'true'或'false'。这是一个具有用户身份验证，令牌的电子商务应用，现在我尝试添加管理员。

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 {

 constructor(private http: HttpClient, private _router: Router) { }

getAdmin() {
    if (localStorage.getItem('admin') === 'true') return true;
    return false;
  }
}

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 {
  constructor(private _authService: AuthService) {
  }
}

app.component.html：

<a class="nav-link" *ngIf="_authService.getAdmin()" routerLink="/admin" routerLinkActive="active">Admin</a>

Answer 1

将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 {
  constructor(public _authService: AuthService) {
  }
}

Answer 2

最好不要从html中调用在服务中编写的函数。我认为，您可以通过将服务范围从私有更改为公共来解决当前问题。但是最好的方法是从html调用组件内部的函数，然后从该函数调用内部的getAdmin（）服务。最佳实践是在进行依赖项注入时将服务范围保留为私有。

app.component.html

<a class="nav-link" *ngIf="adminExists()" routerLink="/admin" routerLinkActive="active">Admin</a>

app.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

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

 constructor(private http: HttpClient, private _router: Router) { }

getAdmin() {
    if (localStorage.getItem('admin') === 'true') return true;
    return false;
  }
}

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 {
  constructor(private _authService: AuthService) {
  }
  adminExists(){
         return _authService.getAdmin();
  }
}