Тема является правильным подходом для этой ситуации? - PullRequest
Новая
       11

Тема является правильным подходом для этой ситуации?

0 голосов
/ 24 апреля 2020

У меня есть приложение Angular, в котором есть много родительских и дочерних компонентов, и мне нужно с ними связаться. Я очень хорошо знаком с взаимодействием между компонентами в Angular, но у меня возникает ситуация, когда я чувствую, что поступаю неправильно.

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

ModalProductComponent

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

ProductListComponent

Проблема в том, что мой список продуктов является дочерним компонентом, и я поместил тему в функцию который создает подписку на тему, которую модал генерирует при отправке данных, и возвращает ее обратно с помощью ModalProductComponent. 

  activeLoad() {
    const loadProductData = this.productService.reloadDataObservable$.subscribe(data => {
      if (data.methodType === 'store') {
        this.category.productList.push(data.productData);
      }
    });
    const sbreloadImgSrcObservable = this.uploadFileService.reloadImgSrc$.subscribe(
      response => {
        const objIndex = this.category.productList.findIndex(function(element) {
          return element.mp_product_id === response.objData.mp_product_id;
        });
        this.category.productList[objIndex]['srcimglist'] = response.objData['srcimglist'];
        this.category.productList[objIndex]['loadState'] = false;
      }
    );
    this.dialog.afterAllClosed.subscribe(
      (_) => {
        loadProductData.unsubscribe();
        sbreloadImgSrcObservable.unsubscribe();
      }
    );
  }

Эта функция выше, теперь я покажу функцию, которую я открываю модальной 

 openProductDialog() {
    const objTemp = { name: 'Adicionar Produto' };
    this.dialog.open(DialogFormStoreProductComponent, {
      panelClass: 'custom-dialog-product-mp',
      width: '920px',
      height: 'auto',
      maxHeight: '800px',
      data: objTemp,
    });
    this.activeLoad();
  }

Я делаю это, потому что, если я добавлю подписку на OnInit, все мои дочерние элементы будут выполняться, и я хочу выполнить только тот продукт, который является клиентом. трахнуться. Так что проблема в том, что я отписываюсь, когда модал закрывается здесь 

this.dialog.afterAllClosed.subscribe(
  (_) => {
    loadProductData.unsubscribe();
    sbreloadImgSrcObservable.unsubscribe();
  }
);

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

Так, каков наилучший подход, чтобы заставить эту работу? Потому что, если я не подписываюсь и пользователь нажимает, чтобы открыть модальное и закрыть его, подписка была сделана, и если он делает это на 10 продуктов, список будет go на 10 продуктов, и я не хочу этого для производительности .

...