为什么代码段会造成内存泄漏？答案

【问题标题】：Why the code segment is creating memory leak?为什么代码段会造成内存泄漏？
【发布时间】：2019-09-08 19:17:07
【问题描述】：

我正在使用 http 服务从 UserService 获取用户数据。当我订阅 observable 时，它会造成内存泄漏。在开发者控制台的网络选项卡中，可以看到无限的 http 请求正在发出。

尝试在 ngOnDestroy() 方法中取消订阅，但没有成功。

user.service.ts

getCurrentUserDetails(){
    return this.http.get<User>(`${this.config.apiUrl}/user/me`);
  }

navbar.component.ts

export class NavbarComponent implements OnInit, OnDestroy {

  user: User;
  userDetailsSubs: Subscription;
  constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
    private userService: UserService
  ) { }

  ngOnInit() {
  }
  isLoggedIn() {
    const currentUser: User = this.authenticationService.currentUserValue;
    if (currentUser) {
      this.userDetailsSubs = this.userService.getCurrentUserDetails()
        .subscribe(
          data => {
            this.user = data;
          }
          , error => {
            console.log(error);
          });
      //this.userDetailsSubs.unsubscribe();
      return true;
    }
    else
      return false;
  }
  logout() {
    this.authenticationService.logout();
    this.router.navigate(['/login']);
  }
  ngOnDestroy() {
    this.userDetailsSubs.unsubscribe();
  }
}

navbar.component.html

<div class="sticky-top mb-3">
  <nav class="navbar navbar-expand-lg navbar-dark bg-danger justify-content-center p-3 mb-3" *ngIf="!isLoggedIn()">
    ..............
  </nav>
  <nav class="navbar navbar-expand navbar-dark bg-danger p-3 mb-5" *ngIf="isLoggedIn()">
      .
      .
      .
  </nav>
</div>

【问题讨论】：

标签： angular angular-httpclient angular-observable

【解决方案1】：

您的isLoggedIn() 函数是在检测到更改时从模板触发的。将 isLogged 属性添加到您的组件并从 ngOnInit 设置它以避免多次调用。

isLogged: boolean;

ngOnInit() {
  const currentUser: User = this.authenticationService.currentUserValue;
    if (currentUser) {
      this.userDetailsSubs = this.userService.getCurrentUserDetails()
        .subscribe(
          data => {
            this.isLogged = true;
            this.user = data;
          }
          , error => {
            console.log(error);
          });
    }
    else
      this.isLogged = false;
}

【讨论】：

谢谢。不再有无限的 http 调用。但问题是，登录后导航栏状态没有改变。需要刷新页面以更改导航栏状态并加载用户信息。
@DusaantaPrasad authenticationService.currentUserValue 会随着组件的使用寿命而变化。您可以将 currentUser 创建为 Observable 并在导航栏组件中订阅它。
虽然答案被接受并且解决方案绝对没问题。或者，您可以使用 Angular 管道。要了解调用函数在模板和解决方案中的影响，请访问以下链接 - blog.angularindepth.com/…

【解决方案2】：

在你的类中创建一个属性，比如isLoggedInFlag。'

在您的isLoggedIn() 方法下，在订阅下将其设置为true。

你的看法是这样的：

<nav class="navbar navbar-expand-lg navbar-dark bg-danger justify-content-center p-3 mb-3" *ngIf="!isLoggedInFlag">

<nav class="navbar navbar-expand navbar-dark bg-danger p-3 mb-5" *ngIf="isLoggedInFlag">

【讨论】：

【解决方案3】：

不要在 HTML 上调用这样的方法。

*ngIf="isLoggedIn()"

它会不断地执行这个方法。

【讨论】：