Вы можете естественно указать конструкцию <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
.
<T>
конструкцию, но от нее нет толкуnew Array<number>()
, компонент инстанциируется в рантайме причем средствами Angular, поэтому вы не можете перегрузить типиз дочернего компонента я должен возвращать Any
, что значит возвращать из дочернего компонента?