Обмен данными между компонентами Angular

Проблема

В результате работы с фреймворком Angular, мы декомпозируем наше web-приложение. И по этому у нас возникает ситуация, когда нам нужно передавать данные между компонентами.

@Input()

Что бы передать данные в дочерний компонент, мы можем использовать декоратор @Input(). Он позволит нам передать данные из родительского компонента в дочерний. Рассмотрим простой пример:

import { Input, Component} from '@angular/core';        @Component({     selector: 'app-child',     template: `<h1>Title: {{ title }}</h1>` }) export class ChildComponent {      @Input() title: string; }

В дочернем компоненте мы мы «задекорировали» нужное нам свойство title. Не забываем импортировать декоратор:

import { Input} from '@angular/core';

Осталось только передать параметр title в дочерний компонент из родительского:

import { Component } from '@angular/core';        @Component({     selector: 'app-component',     template: `<app-child [title]="title" [userAge]="age"></app-child>` }) export class AppComponent {      public title = 'Hello world!'; }

Параметры из класса мы передаем с помощью квадратных скобок [title]="title", простую строку мы можем передать и без использования квадратных скобок title="Hello world". Мы научились передавать параметры из родительского в дочерний, но что если нам надо сделать все наоборот?

@Output()

Благодаря директиве @Output() мы можем привязаться к событиям дочернего компонента. На первый взгляд не очень понятно, так что давайте рассмотрим пример:

import { Component } from '@angular/core';         @Component({     selector: 'app-counter',     template: `<h1>Count: {{ count }}</h1>               <app-add (buttonClick)="onAdd()"></app-add>` }) export class AppCounter {      public count = 0;  public onAdd(): void {     this.count++; }  }

import { Component, EventEmitter, Output } from '@angular/core';  @Component({     selector: 'app-add',     template: `<button (click)="add()"></button>`; }) export class AppAdd {      @Output() buttonClick = new EventEmitter();  		public add(): void {     	this.buttonClick.emit(); 		} }

Думаю данный код требует некоторых объяснений. При клике на кнопку в компоненте AppAdd срабатывает событие click, которое вызывает функцию add(). Код this.buttonClick.emit() вызовет событие buttonClick в компоненте AppCounter. Очень важно правильно импортировать EventEmitter:

import { EventEmitter } from '@angular/core';

Но есть одно «но», мы не передали никакую информацию в родительский компонент. Рассмотрим уже другой вариант в котором мы будем передавать информацию в родительский компонент:

import { Component } from '@angular/core';  @Component({     selector: 'app-better-counter',     template: `<h1>Count: {{ count }}</h1> 							<app-buttons (buttonClick)="onChange($event)"></app-buttons>` }) export class BetterCounterComponent {      public count = 0;  		public onChange(isAdd: boolean): void {       if (isAdd) {         this.count++;       } else {           this.count--;       } 	 } }

import { Component, EventEmitter, Output } from '@angular/core';  @Component({     selector: 'app-buttons',     template: `<button (click)="change(true)"></button>                 							 <button (click)="change(false)"></button>` }) export class ButtonsComponent {      @Output() buttonClick = new EventEmitter<boolean>();  		public change(change: boolean): void {     	this.buttonClick.emit(change); 		} }

Давайте рассмотрим список внесенных изменений:

• Добавили тип передаваемых данных new EventEmitter<boolean>()

• В метод emit передали нужную информацию this.buttonClick.emit(change)

• Принимаем данные как $event в родительском компоненте (buttonClick)="onChange($event)"

@Input() и @Output() достаточно удобно, но не в ситуации, когда на надо передать данные в дочерний компонент, дочернего компонента и т.д., или же компоненты находятся в разных частях приложения.

Сервисы и RxJs

Одними из лучших вариантов обмена данных остаются сервисы. Создадим простой сервис который бы мог оповещать компоненты про изменение данных, а так же передавать значения:

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs';  @Injectable({   providedIn: 'root', }) export class SimpleService {     public count$ = new Subject<number>();  		public changeCount(count: number) {    		this.count$.next(count);    	} }

Наш сервис готов. В нём мы создадим переменную count$. Знак доллара — это договорённость между программистами в обозначениях потоков. Теперь простыми словами про Subject. Subject — это труба, по которой мы можем передавать данные. Данные получают компоненты, которые оформили подписку на Subject. Давайте посмотрим, как изменять count из компонента:

 import { SimpleService } from './services/simple.service.ts';  @Component({     selector: 'app-any',     template: `` }) export class AnyComponentComponent {      constructor(           private readonly simpleService: SimpleService     ) {}      	public setAnyCount(): void {       this.simpleService.changeCount(Math.random()); 		} }

Мы передали результат Math.random() и пустили его по всем подписчикам. Теперь посмотрим как следить за этими изменениями:

import { Component, OnInit } from '@angular/core'; import { SimpleService } from './services/simple.service.ts';  @Component({     selector: 'app-other',     template: `` }) export class OtherComponentComponent implements OnInit {      constructor(        private readonly simpleService: SimpleService     ) {}        ngOnInit(): void {       this.simpleService.count$.subscribe((count) => this.log(count));     }      private log(data: number): void {   		console.log(data);     }  }

На инициализации мы подписываемся на изменения count, и при каждом вызове count$.next(...) где-либо сработает функция которую мы передали в subscribe. Единственная проблема которая осталась в коде — утечка памяти. При переходе между страницами нашего приложения, компонент будет дестроится, а когда он нам снова понадобится произойдёт повторная инициализация. Старая подписка не пропала, а новые с каждым разом будут только добавляться. Функция log() будет запускаться столько раз, сколько у нас есть подписок. Если бы мы имели там какой-нибудь сложный функционал, то пользовать приложения заметил бы снижение производительности. Этого можно избежать, отписавшись от count$ на OnDestroy. Для этого вынесем подписку в переменную и вызовем у неё метод unsubscribe():

import { Component, OnInit, OnDestroy } from '@angular/core'; import { SimpleService } from './services/simple.service.ts'; import { Subsription } from 'rxjs';  @Component({     selector: 'app-other',     template: `` }) export class OtherComponentComponent implements OnInit, OnDestroy {    	private subs: Subsription;      constructor(       private readonly simpleService: SimpleService     ) {}      ngOnInit(): void {       this.subs = this.simpleService.count$.subscribe((count) => this.log(count));     }      ngOnDestroy(): void {   		this.subs.unsubscribe(); 		}      private log(data: number): void {   		console.log(data);     } }

Мы можем подписаться на множество Subject из компонента, подписаться на один и тот же Subject из разных компонентов.

Итог

Мы можем обмениваться данными между компонентов с помощью @Input(), @Output(), а также RxJs. В данной статье я опустил store, так как статья рассчитана на новичков. Советую попрактиковаться в данной теме, что бы улучшить свои навыки.