1

Подскажите как передать данные между дочерними или совсем не родными компонентами? Вроде как можно через сервисы, но немогу понять логику как прописать. К примеру мне нужно передать дату из одного компонента в другой.

1
  • еще пытаюсь вникнуть в эти советы, пока не могу сказаьт помог или нет, разбираюсь=) 22 дек 2018 в 13:55

1 ответ 1

7

Данные между передавать разными способами, можно изолировать логику в сервис, но это уже прибегание к декомпозиции. Можно через байндинги и генераторы событий (EventEmitter), а можно через нативный диспатчинг. Представьте себе такое дерево:

-- app-calendar
  -- app-events
    -- app-event-list
      -- app-event

Мы хотим передать данные из компонента app-event в app-calendar, как бы это выглядело с применением генератора событий?

-- app-calendar (подписывается на генератор из `app-events`)
  -- app-events (подписывается на генератор из `app-event-list` + создает свой генератор для `app-calendar`)
    -- app-event-list (подписывается на генератор из `app-event` + создает генератор для `app-events`)
      -- app-event (создает генератор для `app-event-list`)

введите сюда описание изображения

В конечном итоге нам нужно в трех компонентах на разном уровне создавать генераторы, это будет похоже на макароны. Можно избежать этого используя обычное всплытие событий, например мы хотим компонент app-calendar слушать событие toggleEvent, который диспатчит app-event (находится в самом низу дерева). Для этого мы инжектим ссылку на самого себя в компонент app-event и диспатчим событие:

@Component({
  selector: 'app-event',
  template: `
    <p>Пойду ли я на это событие? - {{ event.status }}</p>
    <button (click)="toggleEvent()">Изменить статус</button>
  `
})
class EventComponent {
  @Input()
  public event: CityEvent = null!;

  constructor(private host: ElementRef<HTMLElement> {}

  public toggleEvent(): void {
    const event = new CustomEvent<CityEvent>('toggleEvent', {
      detail: this.event,
      bubbles: true <-- magic :)
    });

    this.host.nativeElement.dispatchEvent(event);
  }
}

P.S. В IE11 нужно использовать document.createEvent('CustomEvent') + initCustomEvent(...).

В шаблоне компонента app-calendar (который на самой верхушке дерева) мы можем сказать EventManager'у слушать это событие:

@Component({
  selector: 'app-calendar',
  template: `
    <app-events (toggleEvent)="toggleEvent($event)"></app-events>        
  `
})
class CalendarComponent {
  public toggleEvent({ detail }: CustomEvent<SystemEvent>): void {
    console.log(detail);
  }
}

Заметьте что app-event находится внутри app-event-list, но событие может всплыть до app-calendar. Это все работает благодаря зоне и компилятору, результатом работы компилятора будет оптимизированный JavaScript код, в котором будет содержаться уже готовая информация для инициализации директивы:

<app-events (toggleEvent)="toggleEvent($event)"></app-events>
                              |
                        AOT компилятор
                              |
elementDef(..., ..., ..., 'app-events', ..., ..., [['toggleEvent']] <-- свойство `outputs`)
                              |
                    Angular 8 (компилятор Ivy)
                              |
elementStart(index, 'app-events', attrs);
listener('toggleEvent', (event) => componentInstance.toggleEvent(event);
elementEnd();

Поэтому в рантайме компонент, а точнее обертка поверх компонента (ViewDef), знает какое событие слушать, псевдокод ниже:

const events = document.querySelector('app-events');
events.addEventListener('toggleEvent', (event: CustomEvent) => {
    viewDef.componentInstance.toggleEvent(event);
});

В случае с новым Angular и Ivy компилятором - в рантайме обработчик события регистрируется сразу после создания элемента app-events, для этого используются R3 инструкции и инкрементальный DOM.

Я предпочитаю этот вариант, так как он избавляет меня от выделения большого количества памяти. Потому что:

  • Observable - 96 байт
  • Subject - 96 байт
  • EventEmitter - 104 байта
  • Subscription - 104 байта
  • Subscriber - 104 байта
  • Event - 56 байт
  • MouseEvent - 40 байт

Это большая цепочка наследования, вот только каждая сущность имеет свою бизнес логику. EventEmitter это абстракция поверх Subject:

class EventEmitter extends Subject ...

Единственная разница - это возможность асинхронного генерирования событий:

new EventEmitter(true <-- `__isAsync`);

Поэтому в случаях если __isAsync === true - next просто оборачивается в setTimeout.

Второй вариант это общение через сервисы. Общение через сервисы было заложено еще в бете второго Angular, так как Мишко предложил SCA (service-component architecture). Реализация очень простая, сервис создает какой-то генератор событий:

public events$ = new Subject<unknown>();

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

service.events$.next(что-то);

Как пример есть компоненты, которые вообще находятся в разных модулях, но при клике на какую-то кнопку нужно скрывать сайдбар, как это реализовать с использованием сервиса?

@Injectable({ providedIn: 'root' })
export class SidebarService {
  public sidebarShown$ = new BehaviorSubject<boolean>(false);
}

BehaviorSubject - это генератор, который кеширует последнее событие.

@Component({
  template: `
    <app-sidebar *ngIf="sidebarShown$ | async"></app-sidebar>
  `
})
export class SomeComponentOnSomeLevel {
  public sidebarShown$ = this.sidebarService.sidebarShown$.asObservable();

  constructor(private sidebarService: SidebarService) {}
}

В компоненте другого модуля инжектим также этот сервис и генерируем событие на клик:

@Component({
  template: `
    <button (click)="toggleSidebar()">Toggle sidebar</button>
  `
})
export class AnotherComponentOnAnotherLevel {
  constructor(private sidebarService: SidebarService) {}

  public toggleSidebar(): void {
    const shown = this.sidebarService.sidebarShown$.getValue();
    this.sidebarService.sidebarShown$.next(!shown);
  }
}

Когда таких сервисов много есть большая вероятность столкнуться с энтропией и single responsibility начинает подхрамывать.

Самый лучший вариант, хоть вы и новичок, но все равно должны попробовать это в действии - Redux :) Redux - это архитектурный шаблон, который позволяет уменьшить связь между компонентами системы за счет одностороннего потока данных, поступающего из одного хранилища. В Angular есть много инструментов для Redux, такие как NgRx, NGXS, Akita, redux-observable. Redux дает возможность DDD и масштабируемость. Есть вот такая диаграмма, она отражает Redux-ориентированное приложение. введите сюда описание изображения

Если когда нибудь созреете, то советую вам эту статью, она даст вам небольшой экскурс в самые популярные инструменты для Redux в Angular.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.