Angular 6 для обмена данными между компонентами, не обновляющими массив - PullRequest
Новая
       1

Angular 6 для обмена данными между компонентами, не обновляющими массив

0 голосов
/ 17 марта 2019

В angular 6 я пытаюсь добиться, когда пользователь переходит на другую страницу, передавая ID, используя localalstorage вместо параметров url.У меня есть ProductList, компоненты ProductDetails и ProductService.На странице ProductList, когда пользователь нажимает на просмотр продукта, он должен перенаправить на страницу ProductDetails с идентификатором, хранящимся в хранилище localals.В компоненте ProductDetails ngOnInit () я вызываю метод get из службы, но он возвращает старый массив, а не обновленный массив.

Компонент ProductList 

//when user click on view product
goToProduct(id) {
 this.productService.setProductParams({
  routeName:'product-details', //here i am taking name bcz i want to store all routes ID for history purpose
  data: { productId: id }
 });
 this.router.navigate(['/product-details']);

Компонент ProductService 

productData:any = [];
private productUpdated = new Subject<any>();

constructor() { //get data from local storage }

setProductParams(data) {
 //Check whether current route name exist or not
 if (this.productData.filter(e => e.routeName === data.routeName).length > 0) {
 //Get index of existed route
  const index = this.productData.map(function (route) { return route.routeName; }).indexOf(data.routeName);
  //Update product data by index
  this.productData[index].data = data.data;
  this.productUpdated.next(this.productData);
  //Set data to localstorage
  -------
} else {
  this.productData.push(data);
  this.productUpdated.next(this.productData);
  //Set data to localstorage
  -------
}

getProductParams() {
 this.productUpdated.next(this.productData);
 return this.productData;
}

 productUpdatedListener() {
  return this.productUpdated.asObservable();
 }

Компонент ProductDetails 

 data:any = [];

 ngOnInit(){
    this.productService.productUpdatedListener().subscribe(productData => {
   this.data = productData;
    })
 }

здесь, в this.data. Всякий раз, когда я перехожу на эту страницу подробностей, я получаю старый массив.Например, в ProductList, когда я щелкаю по идентификатору продукта 123, он переходит на страницу ProductDetails и показывает идентификатор 123 в массиве, но снова со страницы ProductDetails, когда я нажимаю на другой продукт, скажем, с идентификатором 124, он переходит на страницу ProductDetails, нопоказывая старое значение 123 в массиве.Я перепробовал много подходов, но не смог решить.Чего мне не хватает?Спасибо

1 Ответ

0 голосов
/ 17 марта 2019

Вы должны использовать BehaviorSubject вместо Subject: 

private productUpdated = new BehaviorSubject<any>();
...