Angular5 将 DOM 对象传递给 ng-content答案

【问题标题】：Angular5 pass DOM object to ng-contentAngular5 将 DOM 对象传递给 ng-content
【发布时间】：2018-10-28 21:41:30
【问题描述】：

我是网络新人。

我想在 ag-grid 中自定义默认滚动条。我尝试为此使用 ngx-scrollbar。在源代码 ngx-scrollbar 中，我发现 ngx-scrollbar 使用 ng-content 来包装元素（link to github source file）。如果包装 ag-grid-angular 元素，则滚动甚至不会显示，因为内容不会溢出 ag-grid-angular 内容，因为 oveflow 发生在 div 类 .ag-body-viewport 使用股票滚动。为了达到需要的效果，我希望将类 .ag-body-viewport 的 DOM 元素传递给 ngx-scrollbar 的 ng-content。有可能吗？

更多信息在这里 github issue 但我不使用 Nice Scroll 或 Perfect Scrollbar

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

更新

我可以使用下一个 sintax 将 DOM 元素传递给 ng-content（agGridViewport 是本机元素）：

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

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

现在我得到了类似堆栈样式的 UI：

[渲染真实的 ag-grid-angular]
[用他的内容渲染 ng-scrollbar]

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

【问题讨论】：

标签： scroll angular5 ag-grid

【解决方案1】：

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

更新

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

【讨论】：