0

Есть несколько независимых компонентов на странице.

Каждый компонент складывается\раскрывается по разным событиям происходящим в компоненте.

Реализована логика, когда при клике на определенный компонент, закрываются\открываются несколько других.

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

Реализовал это через общий сервис в котором храню boolean переменные для компонентов. События из компонентов меняют эти переменные. Изменение данных слушаю через DoCheck в каждом компоненте. На сколько такой подход правильный?

Знаю про ngrx, но он пока что-то не входит.

4
  • но он пока что-то не входит что это значит? ngDoCheck - зачем? :)
    – arturovt
    13 дек 2018 в 20:34
  • Не входит = не понятно пока), ngDoCheck - чтобы словить изменение данных
    – Lex
    13 дек 2018 в 20:36
  • есть же много других пакетов для редакса (ngxs / akita / redux-observable), ngdocheck это самый плоход, который может быть :)) вам нужен редакс, вот ответ)
    – arturovt
    13 дек 2018 в 21:03
  • и кстати зачем вам ngdocheck, если вы сказали, что у вас есть общий сервис, в нем можно создать генератор событий Subject и сделать подписку во всех компонентах
    – arturovt
    13 дек 2018 в 22:09

1 ответ 1

1

Один из самых простых вариантов - это реализация через RXJS, как и сказал @overthesanity, можно реализовать через широковещательную подписку.

Далее небольшой пример.

Допустим у вас есть компонет AppComponent в котором есть некий Subject и Observable, необходимые для генерации состояний.

class AppComponent {
    private eventSub$ = new Subject<any>();
    public event$ = this.eventSub$.asObservable();

    constructor() {}

    stateOne(state) {
        ... // логика клика на первый компонент
        this.eventSub$.next(state);
    }

    stateTwo(state) {
        ...  // логика клика на второй компонент
      this.eventSub$.next(state);
    }

    stateThree(state) {
        ... /. логика клика на третий компонент
       this.eventSub$.next(state);
    }
}

И шаблон с компонентами к нему, которые емитят какие-то "события" и принимают Observable событий:

<div>
   <app-template-one [event]="event$" (state)="stateOne($event)"></app-template-one>
   <app-template-two [event]="event$" (state)="stateTwo($event)"></app-template-two>
   <app-template-three [event]="event$" (state)="stateThree($event)"></app-template-three>
</div>

Во внутренних компонентах будет подписка на состояния.

class AppTemplateOneComponent implements OnInit, OnDestroy {
  @Input() set event(event$) {
     this.event$ = event$;
  } 
  @Output() state = new EventEmmiter();
  public event$: Observable<any>;

  public isShowBlock = true;

  private destroy$ = new Subject();

  ngOnInit() {
    this.event$.pipe(

      filter(res => res === 'state1'),
      takeUntil(this.destroy$)
    ).subscribe(res => this.isShowBlock = res)
  }

  ngOnDestroy() {
    this.destroy$.next(true);
    this.destroy$.complete();
  }

  onClick() {
    this.state.emit('state1');
  } 
}

Ну и по переменной isShowBlock вы можете открывать/зыкрывать блоки.

В приведенном выше способе AppComponent является посредником между другими компонентами, которые находятся внутри него.

3
  • 1. takeUntil должен быть после filter, так как filter возвращает новый поток 2. this.destroy$.unsubscribe() не закрывает поток, только очищает массив подписчиков, нужно this.destroy$.complete()
    – arturovt
    20 дек 2018 в 16:01
  • @overthesanity спасибо, поправил. 20 дек 2018 в 16:29
  • @overthesanity насчет отписки, я почему то думал что и поток завершает. 20 дек 2018 в 16:33

Ваш ответ

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

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