1

В общем, сделал generic paginator в виде отдельного класса, который при вызове методов перехода возвращает generic массив.

И вот хочу его сделать в виде отдельного компонента, что бы можно было его многократно использовать на различных компонентах.

Так вот, как вот, можно ли из главного компонента сказать дочернему, что он должен сконструироваться с конкретным типом или нет? Или из дочернего компонента я должен возвращать Any, а родительский класс должен сам к нужному типу все приводить?

Если мой подход в корне не верен, то напишите, как наиболее правильнее это делается.

11
  • нет, нельзя, увы, вы можете указать <T> конструкцию, но от нее нет толку 27 мар 2019 в 15:59
  • @overthesanity, т.е получается, что мой пагинатор должен наружу возвращать массив any, а родитель сам рулить преобразованиями?
    – iluxa1810
    27 мар 2019 в 16:01
  • дженерики полезны в тех случаях, когда вы явно управляете инициализацией, например new Array<number>(), компонент инстанциируется в рантайме причем средствами Angular, поэтому вы не можете перегрузить тип 27 мар 2019 в 16:02
  • есть еще второй вариант, возможно я изложу его в ответе, какая у вас структура компонентов, потому что возможно я не допонимаю вопрос, я просто не понимаю что значит из дочернего компонента я должен возвращать Any, что значит возвращать из дочернего компонента? 27 мар 2019 в 16:04
  • Главное компонент, который имеет таблицу, а внизу дочерний компонент- пагинатор. По моей задумке, главный компонент при инициализации должен передать в дочерний компонент список элементов, пагинатор сформировать страницы и родительский компонент должен получить у дочернего список страниц, которые он отображает на странице и отображать их в виде строк в таблице. Вроде, норм или лучше можно?
    – iluxa1810
    27 мар 2019 в 16:08

1 ответ 1

1

Вы можете естественно указать конструкцию <T>, но какой от нее толк если вы не можете перегрузить тип:

class PaginatorComponent<T> {
  ...
}

Универсальные типы полезны в тех случаях когда вы вручную управляете инициализацией, но к сожалению вам не подвластна инициализация компонента. Компонент инстанциируется в рантайме средствами Angular, где нет TypeScript.

Но есть парочка лайфхаков. Для того, чтобы перегрузить тип - вам нужно получить доступ к инстансу компонента. Есть несколько способов, один из них это DOM запрос, используя @ViewChild.

Представьте себе такой компонент таблицы:

import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'app-table',
  template: `
    <app-paginator></app-paginator>
  `
})
export class TableComponent implements OnInit {
  @ViewChild(PaginatorComponent)
  public paginator: PaginatorComponent<number> = null;

  public ngOnInit(): void {
    this.paginator.setData([1, 2, 3, 4, 5]);
  }
}

Где PaginatorComponent это:

@Component({
  selector: 'app-paginator',
  template: '<p *ngFor="let item of data">{{ item }}</p>'
})
export class PaginatorComponent<T> {
  public data: T[] = [];

  public setData(data: T[]): void {
    this.data = data;
  }
}

Конечно же use кейсы везде разные, в данном случае этот список параграфов - просто банальный пример. Смысл заключается в том, что PaginatorComponent должен экспоузить какие-то публичные методы, которые может использовать родительский компонент.

Тем самым логику можно усложнить, например у вас много компонентов таблиц, но вы хотите переиспользовать пагинатор. У каждого компонента таблицы есть свой личный сервис для работы с данными. Пагинатор об этих сервисах в принципе ничего не должен знать. Но эти сервисы должны реализовывать какой-то контракт, например:

interface FilteringService<T> {
  filter(data: T[]): T[];
}

export class CarsFilteringService<Car> implements FilteringService<Car> {
  public filter(cars: Car[]): Car[] {
    return cars.filter(/* какой-то предикат */);
  }

  // еще куча бизнес логики внутренней
}

export class BooksFilteringService<Book> implements FilteringService<Book> {
  public filter(books: Book[]): Book[] {
    return books.filter(/* какой-то предикат */);
  }

  // еще куча бизнес логики внутренней
}

Это очень грубый пример, но я уверен, что вы разберетесь в этом подходе. PaginatorComponent в свою очередь может использовать только интерфейс FilteringService и ничего не знать о реальных реализациях, потому что они могут даже не существовать в какой-то момент (например сервис находится в провайдерах модуля, который грузится по требованию):

export class PaginatorComponent<T> {
  private data: T[] = [];

  private service: FilteringService<T> | null = null;

  public setData(data: T[]): void {
    this.data = data;
  }

  public setService(service: FilteringService<T>): void {
    this.service = service;
  }

  public filter(): void {
    this.service && this.service.filter(this.data);
  }
}

Где в родительском компонента таблицы, имея под рукой уже конкретный инстанс сервиса и имея доступ к инстансу PaginatorComponent, вы можете засеттить конкретный сервис:

constructor(private booksFilteringService: BooksFilteringService)

this.paginator.setService(this.booksFilteringService);

Второй подход - это инстанциирование компонента вручную. Этот подход сложный и требует углубления в само ядро Angular. Для этого используется сервис ComponentFactoryResolver, который дает доступ к скомпилированным фабрикам компонентов:

@Component({
  selector: 'app-table',
  template: `<ng-container #paginator></ng-container>`
})
export class TableComponent implements OnInit, OnDestroy {
  @ViewChild('paginator', { read: ViewContainerRef })
  public paginator: ViewContainerRef = null;

  private ref: ComponentRef<PaginatorComponent<number>> = null;

  constructor(private resolver: ComponentFactoryResolver) {}

  public ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<PaginatorComponent<number>>(PaginatorComponent);
    this.ref = this.paginator.createComponent<PaginatorComponent<number>>(factory);
    // `ref.instance` - инстанс класса `PaginatorComponent`
    this.ref.instance.setData([1, 2, 3, 4, 5]);
  }

  public ngOnDestroy(): void {
    // Вместе с `TableComponent` также уничтожаем пагинатор
    this.ref.destroy();
    this.ref = null;
  }
}

В этом случае PaginatorComponent нужно также добавлять в entryComponents модуля, для всех компонентов объявленных entryComponents модуля компилятор генерирует фабрику (ComponentFactory<T>) и кеширует в ComponentFactoryResolver. У каждого модуля есть свой ComponentFactoryResolver.

Ваш ответ

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

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