为什么要调用我的函数…几十次?

AuthService 用于认证目的;一旦用户登录, user 属性返回 User 实例(注意 console.log ):

@Injectable()
export class AuthService {
  // ...

  get user(): null | User {
    console.log('Calling getUser()');
    const decodedToken: { sub: {} } | null = this.jwtHelper.decodeToken(this.authToken);
    if (!decodedToken) {
      return null;
    }

    return plainToClass(User, decodedToken.sub);
  }
}

我基本上是打电话来的 authService.user header-component.html

<!--- ... --->
<a class="nav-link" [routerLink]="['logout']">Logout ({{ authService.user.username }})</a>

正在调用getUser() 什么时候 我刷新页面 . 这怎么可能?谁在打电话 这么多次?

参考文献1 :英寸 app.modules.ts

JwtModule.forRoot({
  jwtOptionsProvider: {
    provide: JWT_OPTIONS,
    useFactory: (authService: AuthService) => {
      return { tokenGetter: () => authService.authToken };
    },
    deps: [AuthService]
  }
}),

身份验证服务 core.module.ts 作为提供商:

providers: [
    // ...
    AuthService
],

身份验证服务 参考文献3 HeaderComponent :

export class HeaderComponent implements OnInit {
  constructor(readonly authService: AuthService) { }
}

身份验证服务 :注入 LoginComponent :

export class LoginComponent implements OnInit {
  constructor(private authService: AuthService) { }

身份验证服务 参考文献5 LogoutComponent :

export class LogoutComponent implements OnInit {
  constructor(private authService: AuthService) { }
}