Angular5 将 DOM 对象传递给 ng-content

Question

我是最新的网络。

我想在 ag-grid 中自定义默认滚动条。我尝试为此使用 ngx-scrollbar 。在来源 ngx-scrollbar 我发现 ngx-scrollbar 使用 ng-content 包装元素（link to github source file).如果包裹 ag-grid-angular 元素，那么滚动甚至不会显示，因为内容不会溢出 ag-grid-angular 内容因为溢出发生在 div 和 class .ag-body-viewport 中，其中使用了 stock srolls .为了达到所需的效果，我希望将 DOM 元素与 class .ag-body-viewport 传递给 ng-content ngx-scrollbar。可能吗？

此处有更多信息github issue，但我不使用 Nice Scroll 或 Perfect Scrollbar

我想使用 ngx-scrollbar 因为它具有自定义功能。

更新

我可以使用下一个语法将 DOM 元素传递给 ng-content（agGridViewport 是原生元素）：

<ng-scrollbar>
    {{ agGridViewport }}
<ng-scrollbar>

但它像真实 DOM 对象的副本一样传递元素，但我想像引用一样传递它。

现在我得到了 UI 像一个堆栈样式：

[渲染真实的农业网格-angular]
[用他的内容渲染 ng-scrollbar]

但这不是我需要的。此外，我的伪影渲染效果很差，甚至一些组件也没有出现。现在我想尝试使用 Renderer2 将 ng-scrollbar 元素放在树中两个 DOM 元素之间（.ag-body-viewport -wrapper 和 .ag-body-viewport）。但我认为这是一个非常糟糕的主意，因为 Renderer2 没有将元素放在树中 DOM 元素之间的方法，我的代码将非常复杂和复杂 :( 它必须像注入一样。

Answer 1

不，我无法使用 Angular 工具在 DOM 中进行注入。这样做是个坏主意，现在不可能了。 AgGrid 不支持使用 ngx-scrollbar 等工具进行自定义，这些工具使用 ng-content 来包装组件和其他元素。使用以另一种方式工作的其他工具或使用不支持所有网络浏览器的 webkit 自定义可能是更好的方法。

更新

我也尝试使用smooth-scrollbar。我设法获得了更好的结果。我把他绑定到元素.ag-body-viewport。它工作正常，但它只滚动网格的内容而没有 header 小心。 smooth-scroll bar 没有将水平和垂直滚动条作为不同单位的选项。我知道如何解决问题。垂直滚动条必须绑定到 .ag-body-viewport，水平滚动条必须绑定到 .ag-root。如果你能找到让你这样做的滚动条，你就可以解决这个问题。可能我会在不久的将来为 Angular 编写特殊组件，然后将 link 添加到此答案中。如果你做得更快，你可以添加自己 link 或者你可以添加 link 到已经存在的包。

Angular5 将 DOM 对象传递给 ng-content

Angular5 pass DOM object to ng-content

scroll

ag-grid

angular5