0

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

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

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

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

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

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

4
  • но он пока что-то не входит что это значит? ngDoCheck - зачем? :) 13 дек 2018 в 20:34
  • Не входит = не понятно пока), ngDoCheck - чтобы словить изменение данных
    – Lex
    13 дек 2018 в 20:36
  • есть же много других пакетов для редакса (ngxs / akita / redux-observable), ngdocheck это самый плоход, который может быть :)) вам нужен редакс, вот ответ) 13 дек 2018 в 21:03
  • и кстати зачем вам ngdocheck, если вы сказали, что у вас есть общий сервис, в нем можно создать генератор событий Subject и сделать подписку во всех компонентах 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() 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 that you have read and understand our privacy policy and code of conduct.

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