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

Question

[Jedi]

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

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

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 ?

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

Дайте развернутый ответ, пожалуйста. Буду очень признателен!

Answer 1

[Vitaliy]

Через сервис.

1. В родительском компоненте или в модуле прописать его в providers.
2. Заинжектить в каждый из компонентов.
3. В сервисе, зависимо от того, как wishlist должен получать данные
а. через RxJS объявить Subject и подписаться на него в wishlist
б. в wishlist брать данные из сервиса напрямую (обращаться к конкретному свойству или методу)

Comments

[Jedi]

Виталий, спасибо за ответ! Акад тебе идея сохранить поступающие данные в localStorage? При обновлении страницы ничего не пропадёт :)

[Vitaliy]

PHPjedi, если именно так стоит задача, но не более, так как в случае 3.а второй компонент не узнает об изменении данных, да и лезть часто в localStorage не хорошо

[Jedi]

Виталий Столяров, хорошо. Благодарю!

[Jedi]

Виталий, если ли какие то ссылки по этому? Что-то у меня не получается...

[Vitaliy]

PHPjedi, основые ссылки в ответе, в остальном гугл в помощь)

[Jedi]

Виталий Столяров, Спасибо :)

[Jedi]

Получилось!

Answer 2

[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>. Ещё раз, сервис для такого простого действия городить не нужно.

Comments

[Jedi]

Благодарю!