標識符“ authService”是指組件的私有成員

Question

我真的不知道問題出在哪里。

服務代碼：

import { Injectable } from '@angular/core';

@Injectable()
export class AuthService {
  logout() {
    localStorage.removeItem('token');
  }
}

組件代碼：

import { AuthService } from './../services/auth.service';

export class HomeComponent {
  constructor(private authService: AuthService) {}
}

在HTML代碼的末尾：

<h1>
  Home Page
</h1>
<p *ngIf="authService.isLoggedIn">
  Welcome {{ authService.currentUser.name }}
</p>
<ul>
  <li *ngIf="authService.isLoggedIn() && authService.currentUser.admin">
    <a routerLink="/admin">Admin</a>
  </li>
  <li *ngIf="authService.isLoggedIn()">
    <a routerLink="/login">Login</a>
  </li>
  <li *ngIf="authService.isLoggedIn()" (click)="authService.logout()">
    <a>Logout</a>
  </li>
</ul>

HTML代碼的問題是authService 。 感謝您的閱讀。

Answer 1

在html模板中使用的類中定義的所有屬性都應為public 。 您已將authService定義為私有的，並且對此有所抱怨。

為了解決此問題，您必須將其公開：

constructor(public authService: AuthService) { }