Почему мой сервис внутри NgOnInit продолжает вызываться приложением по нажатию кнопки?

Question

Сейчас у меня есть компоненты Angular, которые должны получить числовые значения и имена CSS-классов из службы и правильно разместить их в представлении компонентов.Данные отображаются правильно и выглядят примерно так:

Но если нажать на кнопку следующей страницы на экране и вернуть страницу назад, появляется другая строкакнопки, и если я переместил страницу и вернулся снова, он отображает еще одну строку кнопки

Я попытался изменить жизненный цикл на основе документации (https://angular.io/guide/lifecycle-hooks)от OnInit к другим вещам, но он все еще показывает то же самое.

  //other code
  //The loop to display the button in view
  <div class="buttonForSlider">
    <div *ngFor="let button of listOfButtons">
      <div class="{{button.initialDivClass}}">
          <span class='btn ratingButton {{button.typeOfButtonClass}} font-weight-bold' [ngClass]="{clickedButtonSlider: button.isClicked}" (click) = "changeSliderValue(button.value)">{{button.value}}</span><div class="{{button.seperatorClass}}"></div>
      </div>
    </div>
  </div>
  //other code

Машинописный текст компонента:

  emojiPath = "";
  minSlider = 0;
  maxSlider = 10;
  tickInterval: number = 0;
  listOfButtons: QuestionSlider[] = [];
  isCalled: boolean = false;

  ngOnInit() {
     this.getNumberOfButtons();
  }

  getNumberOfButtons(){
  this.questionSliderService.getButtonForSlider(this.minSlider, this.maxSlider)
  .subscribe(listOfButtons =>
    {
      this.listOfButtons = listOfButtons;
    }
  )
  //other code

Файл службы:

  export class QuestionSliderService {
  listOfButtons: QuestionSlider[] = []
  i: number = 0;
  getButtonForSlider(minValue: number, maxValue: number){
  for(this.i = minValue; this.i <= maxValue; this.i++){
  if(this.i == minValue){
    this.listOfButtons.push({
      value: this.i,
      initialDivClass: 'buttonPositioning',
      typeOfButtonClass: 'btnHead',
      seperatorClass: 'seperator',
      isClicked: false
    });
  }

  else if(this.i == maxValue){
    this.listOfButtons.push({
      value: this.i,
      initialDivClass: '',
      typeOfButtonClass: 'btnTail',
      seperatorClass: '',
      isClicked: false
    });
  }

  else{
    this.listOfButtons.push({
      value: this.i,
      initialDivClass: 'buttonPositioning',
      typeOfButtonClass: 'btnMiddle',
      seperatorClass: 'seperator',
      isClicked: false
    });
  }
}
return of(this.listOfButtons);
}
}

Я хочу, чтобы на странице отображался ряд кнопок только один раз, а не повторялся снова и снова каждый раз, когда я перехожу на следующую страницу. Можете ли вы, ребята, помочь мне с этой проблемой? Я думаю, что я неправильно использовал жизненный цикл, но я неслишком уверен, так как я попытался изменить его на те, что в документации, но он дает те же результаты.

Answer 1

Что ж, ваш QuestionSliderService все еще существует после того, как вы покинете свою страницу. Поэтому переменная listOfButtons в вашем сервисе по-прежнему заполнена значениями предыдущего выполнения метода getButtonForSlider.

Быстрое решение - вернуть значения напрямую, а не сохранять их в переменной класса

  export class QuestionSliderService {
  i: number = 0;
  getButtonForSlider(minValue: number, maxValue: number){
  listOfButtons: QuestionSlider[] = []
  for(this.i = minValue; this.i <= maxValue; this.i++){
  if(this.i == minValue){
    listOfButtons.push({
      value: this.i,
      initialDivClass: 'buttonPositioning',
      typeOfButtonClass: 'btnHead',
      seperatorClass: 'seperator',
      isClicked: false
    });
  }

  else if(this.i == maxValue){
    listOfButtons.push({
      value: this.i,
      initialDivClass: '',
      typeOfButtonClass: 'btnTail',
      seperatorClass: '',
      isClicked: false
    });
  }

  else{
    listOfButtons.push({
      value: this.i,
      initialDivClass: 'buttonPositioning',
      typeOfButtonClass: 'btnMiddle',
      seperatorClass: 'seperator',
      isClicked: false
    });
  }
}
return of(listOfButtons);
}
}

или для реализации метода clearButtons (), который вы вызываете первым в вашем ngOnInit

  // in your component
  ngOnInit() {
     this.questionSliderService.clearButtons();
     this.getNumberOfButtons();
  }

  // in your service
  clearButtons() {
     this.listOfButtons = []
  }