Чувствую, что нужно копать в сторону динамических компонентов?
Да. Профит динамических компонентов - это изоляция бизнес логики в коде (не в шаблоне).
один поиск должен отображать данные в dropdown-меню, а другой фильтровать данные в таблице компонента.
Если следовать этим требованиям, то у каждого компонента должна быть своя "личная" бизнес логика, можно конечно сделать 1 компонент и накидать там кучу if
конструкций, но это будет каша.
как могу прокинуть различный внешний вид поиска
Также у каждого компонента будет свой внешний вид.
На практике все довольно просто, нужен сервис, который будет заниматься инициализацией этих компонентов, согласно разным условиям (в нужный момент проджектить компонент поиска либо компонент для фильтрации либо еще какой-то компонент).
Пусть у нас уже есть 2 компонента, один для поиска с результатами в дропдауне:
@Component({
selector: 'app-search',
template: `
<input type="search" placeholder="Поиск" #search>
<app-dropdown *ngIf="results.length" [results]="results"></app-dropdown>
`,
styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit, OnDestroy {
@ViewChild('search')
public search: ElementRef<HTMLInputElement> = null;
public results = [];
private readonly destroy$ = new Subject<void>();
public ngOnInit(): void {
fromEvent(this.search.nativeElement, 'keyup').pipe(
auditTime(1000),
distinctUntilChanged(),
switchMap((searchWord) => someSearchService.search(searchWord)),
takeUntil(this.destroy$)
).subscribe((results) => {
this.results = results;
});
}
public ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
Второй для фильтрации:
@Component({
selector: 'app-table-filter',
template: `
<input type="search" placeholder="Введите значение для фильтрации..." (keyup)="filterTable($event.target.value)">
`,
styleUrls: ['./table-filter.component.scss']
})
export class FilterTableComponent {
constructor(private tableService: TableService) {}
public filterTable(value: string): void {
if (value.length < 3) {
return;
}
// P.S. - данные могут располагаться в компоненте таблицы в другом месте на другом уровне
this.tableService.filterData(value);
}
}
2 компонента также имеют свои собственный стили.
Еще можно сделать компонент FilterTableComponent
слабосвязанным, чтоб он зависел не от конкретной реализации сервиса, а от абстракции (dependency inversion).
export class FilterTableComponent {
@Input()
public service: TableService = null;
public filterTable(value: string): void {
if (value.length < 3) {
return;
}
this.service.filterData(value);
}
}
Только TableService
уже становится интерфейсом, который будут имплементить конкретные классы.
Нужно место куда будут проджектиться эти компоненты - контейнер, пускай все эти компоненты будут находиться в хедере:
@Component({
selector: 'app-header',
template: `
<header>
<app-profile></app-profile>
<ng-template #container></ng-template>
</header>
`
})
export class HeaderComponent {
@ViewChild('container', { read: ViewContainerRef })
public container: ViewContainerRef = null;
}
Нужен глобальный сервис, который должен знать об этом контейнере:
@Injectable({ providedIn: 'root' })
export class HeaderService {
private container: ViewContainerRef = null;
private ref: ComponentRef<unknown> | null = null;
public setContainer(container: ViewContainerRef): void {
this.container = container;
}
public createComponent<T>(resolver: ComponentFactoryResolver, injector: Injector, component: Type<T>): void {
this.destroy();
this.ref = this.container.createComponent(
resolver.resolveComponentFactory(component),
0,
injector
);
}
private destroy(): void {
if (this.ref) {
this.ref.destroy();
this.ref = null;
}
}
}
Нужно инжектить его в HeaderComponent
и засеттить контейнер:
export class HeaderComponent implements OnInit {
@ViewChild('container', { read: ViewContainerRef })
public container: ViewContainerRef = null;
constructor(private headerService: HeaderService) {}
public ngOnInit(): void {
this.headerService.setContainer(this.container);
}
}
Теперь с любого места в приложении можно проджектить любой компонент. Динамический компонент, типа фильтра таблицы, должен принадлежать какому-то модулю и объявлен в declarations
и entryComponents
, у каждого модуля есть свой ComponentFactoryResolver
и Injector
.

Остается только создавать нужные модули с компонентами и проджектить их, например на странице с таблицей:
@Component({
selector: 'app-table',
template: `
<table>...</table>
`
})
export class TablePage implements OnDestroy {
constructor(
resolver: ComponentFactoryResolver,
injector: Injector,
private readonly headerService: HeaderService
) {
headerService.createComponent(resolver, injector, FilterTableComponent);
}
public ngOnDestroy(): void {
this.headerService.destroy();
}
}