错误类型错误：_co.getAdmin 不是函数

Question

This is an Angular application and it's something wrong with function getAdmin() in auth.service , but I have no idea what. When I moved this function to app.component.ts and changed to "getAdmin()" in HTML, it was OK, but I need this function in service. Please tell me what's wrong and how can I fix it.

PS. variable admin returns 'true' or 'false' as a string. It's e-Commerce app with user authentication, token and now I try to add admin.

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

It's always better to not call a function written in service from html . I think, you can resolve your current issue by changing your service scope from private to public. But the best way is to call a function inside component from html and call the getAdmin() inside service from that function. The best practise is to keep the service scope to private itself while doing dependency injection.

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();
  }
}

Answer 2

Change scope of service private to public in 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) {
  }
}