Html 角度-构建ActionBar-当当前容器中没有空间时，将元素移动到其他容器中

我想创建一个自定义ActionBar库。想要使用ActionBar的用户可以插入操作，这些操作将由ng内容呈现。 当ActionBar太小而无法显示所有动作时，我希望显示一个下拉列表，其中包含不适合该栏的其余动作。 我有一个调整大小的观察员，负责隐藏/显示

调用ActionBar

 <action-bar>
        <action-bar-left>
            // user action to display in the action bar
            <button class="btn accept" (click)="onActionBarBtnClick('accept')"></button>
        </action-bar-left>
 </action-bar>

问题是，我无法通过这种方式获得渲染元素的宽度

我想做的是：

• 让用户在线添加ActionBarActions
• 确定哪些操作适合操作栏
• 显示下拉列表中不适合的其他操作
• 调整窗口大小时，如果操作适合ActionBar，则应重新计算窗口大小

   <action-bar>
          <action-bar-left>
              // user action to display in the action bar
              <button class="btn accept" (click)="onActionBarBtnClick('accept')"></button>
          </action-bar-left>
   </action-bar>
  

  有一个ActionBarRight，但在这个上下文中它并不有趣

constructor(private _host: ElementRef, private _renderer: Renderer2, private _ngZone: NgZone) { }

public ngAfterViewInit(): void {
    this._ngZone.runOutsideAngular(() => {
        this._resizeObserver = new ResizeObserver((_entries, _observer) => {
            this.displayActions();
        });
        this._resizeObserver.observe(this._host.nativeElement);
    });
}

private displayActions(): void {
    this.elementsHidden = false;
    this.resetOverlay();
    const hostElem = this._host.nativeElement;
    let availableWidth = this._host.nativeElement.clientWidth - this._reservedDropDownSpace;
    const notVisible = [];
    for (const el of hostElem.children) {
        availableWidth -= el.clientWidth;
        if (availableWidth < 0) {
            if (el.className.startsWith("action-bar-not-visible-elements")) {
                continue;
            }
            this.elementsHidden = true;
            notVisible.push(el);
        }
    }
    for (const el of notVisible) {
        this._renderer.appendChild(this._overlay.nativeElement, el);
    }
}

private resetOverlay(): void {
    for (const child of this._overlay.nativeElement.children) {
        this._renderer.insertBefore(this._host.nativeElement, child, this._dropDownButton.nativeElement);
    }
}

viewContainerRef.createEmbeddedView(templateRef);