Как передать данные из одного компонента в другой при событии

Question

У меня есть app.component.html:

<div class="container">
  <app-filter (filter)="applyFilter($event)"></app-filter>
  <app-table [elementData]="elementData" [filter]="filter"></app-table>
</div>

Компонент app-filter это фильтр поиска. Когда срабатывает (filter) он возвращает объект с информацией о фильтре.
В данном случае в app.component.ts функция applyFilter срабатывает, когда происходит фильтрация в app-filter.
Как я могу сделать так, чтобы при фильтрации данные передавались в app-table и при этом, это происходило в какой-то функции, чтобы это можно было отслеживать?
Ссылка на app-component

Answer 1

Если я правильно понял вашу проблему, можно воспользоваться классом Subject из модуля rxjs:

import { Subject } from 'rxjs';

export class Filter {
    changed$ = new Subject<Filter>();

    emitChanged() {
        this.changed$.next(this);
    }
}

Тогда внутри компонента app-table подключаем слушателя к объекту фильтра:

export class TableComponent implements AfterViewInit, OnInit {

    private filters: Filter[];

    @Input() set filter(filter: Filter) {
        filter.changed$.subscribe( (filterObject) => {
           //...
        });
        this.filters.push(filter);
    }
}

Answer 2

В общем и целом, Александр прав, но я вижу большое пространство для запутывания Михаила.

Можно добиться того же самого результата просто использовав указанный Александром сеттер

export class TableComponent implements AfterViewInit, OnInit {

    private filters: Filter[];

    @Input() set filter(filter: Filter) {
        // Выполнение какой-либо операции 
        this.filters.push(filter);
    }
}

Почему так - метод applyFilter(filter: Filter) обновляет свойство app-component компонента filter.

public applyFilter(filter: Filter) {
    this.filter = filter;
}

ChangeDetector поймёт что фильтр изменился и затем передаст этот тик в компонент таблицы, которая поймает изменения с помощью вышеуказанного сеттера.

Также можно написать провайдер, который AppComponent будет провайдить в себя, а дочерний компонент TableComponent будет его получать и использовать для показа, но это более продвинутая тема

БЛОГ НА HUSL

Как передать данные из одного компонента в другой при событии

Ответы (2 шт):