Блог

Главная - Вопросы по программированию - Почему сегмент кода создает утечку памяти?

Почему сегмент кода создает утечку памяти?

#angular #angular-httpclient #angular-observable

#angular #angular-httpclient #angular-наблюдаемый

Вопрос:

Я использую http-сервис для получения пользовательских данных из UserService. Когда я добавляю к наблюдаемому, это создает утечку памяти. На вкладке сеть консоли разработчика видно, что выполняются бесконечные 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>

Ответ №1:

Создайте свойство в своем классе, скажем 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">

Ответ №2:

Ваша 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;
}

Комментарии:

1. Спасибо. Больше никаких бесконечных HTTP-вызовов. Но проблема в том, что после входа в систему состояние панели навигации не меняется. Необходимо обновить страницу для изменения состояния панели навигации и загрузки информации о пользователе.

2. @DusayantaPrasad authenticationService.currentUserValue меняется со временем жизни компонента. Вы можете создать currentUser как наблюдаемый и подписаться на него внутри компонента navbar.

3. Хотя ответ принят, и решение абсолютно правильное. В качестве альтернативы вы можете использовать Angular pipe. Чтобы понять влияние вызова функции в шаблонах и решении, перейдите по следующей ссылке — blog.angularindepth.com /…

Ответ №3:

Не вызывайте подобный метод в HTML.

 *ngIf="isLoggedIn()"

он будет постоянно выполнять этот метод.

Метки: