0

Хочу создать универсальный компонент с фильтрами со структурой:

<filter-panel>
  <input>
  <component-input></component-input>
  <calendar></calendar>
</filter-panel>

Суть в том, что компонент с фильтрами должен собирать значения со всех вложенных фильтров и выполнять какой-либо свой метод. Компоненты-фильтры могут быть в любом количестве и порядке. Не хотелось бы вносить в разметку лишнего кода в каждый дочерний компонент, на примере события (change)='childChange($event).

Получить дочерние компоненты и вставить в тело панели фильтров не составляет труда с помощью <ng-content>. Есть способ получить доступ к изменениям значений дочек?

Как вообще лучше всего будет реализовать данную задачу?

1
  • правильным решением будет реализация всех вложенных компонент с NG_VALUE_ACCESSOR. Он позволит применять биндинг ngModel или formControl, который безупречно решает проблему оповещения filter-panel об изменении значений контролов 26 июн 2017 в 8:31

1 ответ 1

0

Решить можно вашу задачу через динамические компоненты (сам реализовывал недавно). Вот статья по возможной реализации.

Сам делал так:

  1. Добавляете в разметке своей компоненты следующее: <ng-template #filterPlaceholder></ng-template>. #filterPlaceholder - это ссылка на элемент
  2. В теле компонента добавляете следующее:

    export class UgskTableComponent implements OnInit, AfterViewInit {
    @ViewChild('filterPlaceholder', { read: ViewContainerRef }) container;
    
    constructor(private componentResolver: ComponentFactoryResolver) { }
    
    ngAfterViewInit() {        
        let componentFactory: any;
        componentFactory = this.componentResolver.resolveComponentFactory(UgskTableInputFilterComponent);
        let component = this.container.createComponent(componentFactory);
        (<IUgskFilterComponent>component.instance).Label = 'Фильтр по фамилии';   
        (<IUgskFilterComponent>component.instance).Value = 'Иванов';   
    
        }
    }
    

    Реализация интерфейса:

    export interface IUgskFilterComponent {
        Value: any;
        Label: string;
    }
    

    Реализация компоненты фильтра

    export class UgskTableInputFilterComponent implements IUgskFilterComponent {
        @Input() public Value: any;
        @Input() public Label: string;
    
        constructor() { }
    }
    
  3. Получение значений фильтра уже может быть путём сохранения ссылок на добавленные компоненты фильтра в родителе и по событию обращение к отрытым свойствам компонентов фильтров. Либо путём оповещения родителя об изменениях в дочерних элементах.

4
  • Спасибо за помощь, но это не совсем то, что я хотел. Мне кажется, что я нашел решение моей задачи здесь stackoverflow.com/questions/34802210/… 26 июн 2017 в 6:41
  • И в документации оказывается это есть angular.io/guide/… . Как я раньше не заметил, не понимаю 26 июн 2017 в 7:11
  • хотя это тоже не подходит для моей задачи 26 июн 2017 в 8:33
  • Значит решение, надо искать самому :) 26 июн 2017 в 10:25

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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