0

我正在尝试构建自己的自定义角度下拉指令。该指令应按如下方式使用：

<div bsDropdown>
    <button bsDropdownToggle class="btn btn-primary">Dropdown</button>
    <div *bsDropdownMenu>
        <bs-calendar></bs-calendar>
    </div>
</div>

目前正在使用以下代码生成结构指令的元素：

const button = this.dropdown.toggle.toggleButton.nativeElement;

this.bodyContainer = this.renderer.createElement('div');
this.renderer.setStyle(this.bodyContainer, 'position', 'absolute');
this.renderer.setStyle(this.bodyContainer, 'left', button.offsetLeft + 'px');
this.renderer.setStyle(this.bodyContainer, 'top', parseInt(button.offsetTop + button.offsetHeight) + 'px');
this.renderer.setStyle(this.bodyContainer, 'width', button.offsetWidth + 'px');
this.renderer.appendChild(this.document.body, this.bodyContainer);

if (this.bodyContainer) {
  const templateView = this.templateRef.createEmbeddedView({ });
  this.renderer.appendChild(this.bodyContainer, templateView.rootNodes[0]);
  templateView.detectChanges();
}

这一次可以正常工作，但遗憾的是在下拉列表内的组件上触发的事件不会更新角度应用程序。当然detectChanges，每次点击按钮时从外部调用可以解决这个问题，但这不是一个干净的解决方案。事件绑定工作得很好，只是视图没有更新。

我已经查看了以下资源：ng-bootstrap/dropdown。

我还尝试将下拉列表放在应用程序 html-tag 中：

this.renderer.appendChild(this.document.body.children[0], this.bodyContainer);

所有代码都在这个存储库中

那么如何让更改检测对通过生成的模板正常工作Renderer2？

4

0 回答 0