Как предотвратить повторный вызов метода при обратном перенаправлении Angular

Question

Допустим, я нажал кнопку «Отслеживаемый заказ», он перейдет на страницу «Отслеживание заказа». Но когда я перенаправлялся обратно на страницу «Мой заказ», он вспомнил тот же метод, в результате чего он отображался дважды, как на изображении ниже. Предположим, у него всего 1 заказ. Есть ли способ предотвратить это?

Это мой машинописный текст страницы моего заказа

@Component({
  selector: 'app-orders',
  templateUrl: './orders.page.html',
  styleUrls: ['./orders.page.scss'],
})
export class OrdersPage implements OnInit {
  orders=[];

  constructor(public navCtrl: NavController, public share: ShareService,private router: Router) { }

  ngOnInit() {

    this.orders=this.share.getOrders();
  }

}

Это мой сервис обмена машинопись

@Injectable()
export class ShareService{
    url:string="https://localhost:44399/api/APIOrder";
    orders= [];
    constructor(private http:Http){

    }
    public getAll()
    {
        return this.http.get(this.url).map(res=>res.json());
    }

    public getOrders(){

        this.getAll().subscribe(data =>{
          for(var i=0;i<data.length;i++)
          {
            this.orders.push(data[i]);
          }
        })
        return this.orders;
    }

Answer 1

Находясь внутри сервиса, массив orders сохраняет свое значение при навигации. По мере того, как вы получаете sh данные при инициализации каждого компонента, этот массив продолжает расти.
Если этот массив предназначен только для использования вашим компонентом, вы должны просто удалить его и позволить getOrders() вернуть значение, испускаемое наблюдаемым (вы даже можете удалить l oop, так как в конце он просто дублирует его)

Вы можете упростить рабочий процесс, используя канал asyn c, чтобы очистить ваш код и получить автоматизацию c отмена подписки на вашем наблюдаемом:

Компонент:

orders$: Observable<Orders>;

constructor(private share: ShareService) {}

ngOnInit() {
 this.orders$ = this.share.getAll(); // you don't need getOrders() anymore
}

Шаблон:

<div *ngFor="let order of orders$ | async"> // the pipe has a built-in subscription
<!-- order template -->
</div>

Answer 2

Это потому, что this.orders в службе уже присвоено значение при перенаправлении обратно на страницу. Вам нужно вернуть наблюдаемый из службы и подписаться на него в контроллере. Таким образом массиву orders в контроллере присваивается новое значение при каждой загрузке компонента.

Кроме того, если вы не изменяете данные из бэкэнда, for не требуется. Вы можете напрямую назначить ответ массиву orders. Попробуйте следующее

Сервис

@Injectable()
export class ShareService{
  url:string="https://localhost:44399/api/APIOrder";
  orders= [];

  constructor(private http:Http){ }

  public getAll() {
    return this.http.get(this.url).map(res=>res.json());
  }
}

Контроллер

@Component({
  selector: 'app-orders',
  templateUrl: './orders.page.html',
  styleUrls: ['./orders.page.scss'],
})
export class OrdersPage implements OnInit {
  orders=[];

  constructor(public navCtrl: NavController, public share: ShareService,private router: Router) { }

  ngOnInit() {
    this.share.getAll().subscribe(data => {
      this.orders = data;
    });
  }
}