Передать значения между двумя компонентами в угловых на одном и том же виде - PullRequest
Новая
       26

Передать значения между двумя компонентами в угловых на одном и том же виде

0 голосов
/ 06 июля 2018

Я использую Angular 4, где я хочу макет, как показано ниже enter image description here

Здесь я хочу подобный макет. Где контейнер 1 имеет поля формы, а второй контейнер показывает список элементов, которые были добавлены из левой боковой формы. Я хочу, чтобы он был динамическим. Когда пользователь нажимает кнопку добавления элемента, он должен показывать поле описания, после чего, когда пользователь нажимает кнопку подтверждения, элемент должен быть добавлен в правую часть окна, как показано ниже.

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

Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 06 июля 2018

Проблема:
Скажем, ваш сервис 

ShareContent {
 items: any[];
}

И ваш component1 и component2 ССЫЛКА на этот ShareContent.items. Я полагаю, ваши предметы - это Массив. Массив в JavaScript использует ссылку. Поэтому, когда вы редактируете элементы в component1, компонент2 также будет затронут
, потому что они содержат одну и ту же ссылку.

Решите: Сделайте так, чтобы только component2 содержал ту же ссылку со службой. Элементы в component1 сначала будут содержать разные ссылки, но те же данные. Чтобы решить эту проблему, вы должны
Первый в вашем компоненте1 

Component1 {
  constructor(shareContent: ShareContent) {
   //Here you should let your items in component1
   //hold the different reference to items
   //You could look up for spreading(...) operator
   this.items = [...this.shareContent.getItems()];
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

Во-вторых, ваш компонент 2 

 Component2 {
  constructor(shareContent: ShareContent) {
   //Here you SHOULD let your items
   //hold the same reference with the service
   this.items = this.shareContent.getItems();
  }
  addItem(item) {
   this.shareContent.add(item);
  }
}

ShareContent {
  items: any[];
  addItem(item) {
    this.items.push(item);
  }
}
0 голосов
/ 06 июля 2018

В этом случае Вы можете использовать service с subject. Служба в Angular является одноэлементной, что означает, что она управляется как единый экземпляр. Поэтому, если каждый из компонентов получает доступ к службе, они получат доступ к одним и тем же общим данным. 

export class cartService{
    private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }
}

В вашем компоненте вы можете сделать это, 

  this._cartService.UpdateCount(this.prod.length);
...