Angular: делиться событиями в Angular Service и дважды использовать один и тот же компонент на странице

Question

Моя пользовательская таблица состоит из нескольких компонентов. Каждый из этих компонентов генерирует свои события, используя общий сервис TableEvent. Все эти события подписаны в классе TableTemplate, который управляет связью между различными компонентами моей пользовательской таблицы.

Все работает нормально, если на странице есть только одна таблица, с большим количеством таблиц события выполняются во всех таблицах, а не в той, которая сгенерировала событие. Как я могу решить эту проблему?

@Injectable()
export class TableEvent {
    private sortChangeSubject: Subject<any> = new Subject();
    public sortChange = this.sortChangeSubject.asObservable();

    public sortChangeEmit($events) {
        this.sortChangeSubject.next($events);
    }
}

export abstract class TableTemplate implements OnInit, OnDestroy {

    protected constructor(public tableName: string, public options:TableConfig = {}) {
        this.tableEvent = AppInjector.get(TableEvent);
        this.subscription.add(this.sortChangeEvent());
    }

    protected sortChangeEvent() {
        return this.tableEvent.sortChange.subscribe($event => {               
            this.load($event);
        });
    }

    protected abstract setColumnDef(): ColumnDef[];

    protected abstract getDataSource(optionFilters?, optionsSort?): Observable<T>;
}

@Component({
    selector: 'app-clients',
    templateUrl: './clients.component.html',
    styleUrls: ['./clients.component.scss']
})
export class ClientsComponent extends TableTemplate {
    protected setColumnDef(): ColumnDef[] {
        return [...];
    }

    protected getDataSource(optionFilters?, optionsSort?): Observable<Object> {
        return ...
    }
}

<!-- clients.component.html -->
<app-table
    [sortName]="'id'"
    ...
</app-table>

Я отредактировал, чтобы добавить больше кода. TableTemplate это класс, а не компонент. Компонент, который реализует мою пользовательскую таблицу, должен наследоваться от TableTemplate.

Добавление

@Component({
  ...
  providers: [TableEvent]
})

до ClientsComponet или TableComponent Я получаю сообщение no providers for TableEvent

Я использую Angular 7.1

Answer 1

Предоставление услуги TableEvent на уровне компонента таблицы обеспечит, чтобы у каждой таблицы был свой экземпляр службы:

@Component({
  ...
  providers: [TableEvent]
})
export class TableComponent extends TableTemplate {
  ...
}

Убедитесь, что вы удалили корневого поставщика вопределение сервиса:

@Injectable()
export class TableEvent {
  ...
}

См. этот стек для демонстрации.

Answer 2

Необходимо установить идентификатор экземпляра для каждого компонента и отправить источник и назначение события в службу. Каждый компонент проверяет идентификатор назначения.