在 AngularDart 中自定义材质滑块答案

【问题标题】：Customizing material-slider in AngularDart在 AngularDart 中自定义材质滑块
【发布时间】：2018-06-13 13:47:20
【问题描述】：

我想在 AngularDart 中自定义 <material-slider> 组件。我想为某个值添加一个标记，如下所示：

------|----O-------

这里的| 是我要添加的标记，这里的O 是滑块的普通旋钮。不会有任何用户与标记的交互，我只是从代码中设置它。

这样做的最佳方法是什么？我应该到达它的 DOM 并在那里注入一些东西吗？我可以扩展MaterialSlider 类吗？有没有可能有帮助的例子？

【问题讨论】：

【解决方案1】：

我最终在material-slider 后面显示了标记。这样我根本不需要修改material-slider。

我用position: relative 创建了一个父div，它有material-slider 和标记div 作为孩子。标记 div 具有 position: absolute 和 left: 50% 以将其放置在滑块的中间。

我探索的其他事情是：

是的，您似乎可以扩展组件，不，这不好玩。
您可以获取具有material-slider 的您自己的组件的dart:html Element 并向其中添加内容。为此，您将Element 注入到您的构造函数中。但是，您必须在 AfterViewInit 中使用它才能将 material-slider 创建为子级。 querySelector() 帮助您到达material-slider 的Element，之后您可以执行slider.children.add() 之类的操作

【讨论】：