@PHPjedi

Как передавать данные между компонентами?

Здравствуйте!

Я хочу передать данные с одного компонента на другой.

HomeComponent`s template:

<app-products></app-products>

<app-wishlist></app-wishlist>


Разметка products.component.html:

<ul>
  <li *ngFor="let item of data" (click)="handleClick($event, item)">{{ item.title }}</li>
</ul>


products.component.ts:

export class ProductsComponent implements OnInit {

  public data = [
    {title: 'lorem ipsum'},
    {title: 'lorem ipsum'},
    {title: 'lorem ipsum'},
    {title: 'lorem ipsum'},
    {title: 'lorem ipsum'},
  ];

  constructor() { }

  ngOnInit() {
  }

  handleClick(event: Event, data) {
    event.preventDefault();
    console.log(data);
  }

}


Как вы можете увидеть, по клику на каждый элемент списка, я могу получить его в products.component.ts.

Вопрос в том, как мне передать с products.component.ts на wishlist.component.ts ?

Как грамотно это реализовать?

Дайте развернутый ответ, пожалуйста. Буду очень признателен!
  • Вопрос задан
  • 78 просмотров
Решения вопроса 2
Через сервис.

1. В родительском компоненте или в модуле прописать его в providers.
2. Заинжектить в каждый из компонентов.
3. В сервисе, зависимо от того, как wishlist должен получать данные
а. через RxJS объявить Subject и подписаться на него в wishlist
б. в wishlist брать данные из сервиса напрямую (обращаться к конкретному свойству или методу)
Ответ написан
@msdosx86
Целый сервис ради такого простого действия городить не надо. Здесь надо использовать декораторы @Input @ Output. В products компоненте создаёте свойство @ Output public clicked = new EventEmitter(); и при клике эмитишь свои данные через this.clicked.emit(data);. Дальше в home компоненте нужно подписаться на это событие через
<app-products (clicked)=“onClicked($event)”></app-products>
. Создаёшь в home компоненте свойство data и присваиваешь только что пойманные данные в методе onClicked. То есть onClicked(data) { this.data = data; }.
Дальше в компоненте wishlist создаёшь свойство @Input public data; и прокидываешь из home компонента свои данные <app-wishlist [data]=“data”></app-wishlist>. Ещё раз, сервис для такого простого действия городить не нужно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы