如何使用结构指令将一个组件插入另一个组件？

Question

我正在尝试将自己的页面选择器添加到Google的Material Paginator中，因为它不提供页面选择功能。我正在尝试将自定义组件插入mat-paginator组件中。

我在mat-paginator元素上使用了结构指令，并且能够使用mat-paginator访问templateRef元素。我已经使用ComponentFactoryResolver为我的自定义组件创建了工厂。我似乎无法将工厂变成一个组件，因此可以使用Renderer2来插入它。

这是我到目前为止所拥有的：

HTML：

<mat-paginator [length]="paginationOptions.length"
                       class="mat-paginator-sticky"
                       *stPageSelect
                       [pageSize]="paginationOptions.pageSize"
                       [pageSizeOptions]="paginationOptions.pageSizeOptions">
        </mat-paginator>

指令

this.viewContainer.createEmbeddedView(this.templateRef);
const button = this.templateRef.elementRef.nativeElement.nextSibling.querySelector('.mat-paginator-navigation-next');
const parent = this.templateRef.elementRef.nativeElement.nextSibling.querySelector('.mat-paginator-range-actions');
const cmpFactory = this.cfr.resolveComponentFactory(StPageSelectComponent);
const newElement = this.renderer.createElement('st-page-select');
this.renderer.insertBefore(parent, newElement, button);

我希望将自定义组件插入到分页器的“下一步”箭头之前。