使用 Angular 指令来扩展第三方组件。
使用 Angular 指令来扩展第三方组件。
在我目前使用的项目中 ķ irby 设计 UI 库和 kirby-form-field 组件无法处理 字首 或者 后缀 ，所以我必须找到一个解决方案来修改现有的 kirby-form-field 组件，以支持前缀或后缀。
有什么问题？
我的第一次尝试是在 kirby-form-field 中插入一个 div 元素，然后简单地将其与输入字段的左侧对齐。
Using the kirby-form-field in app.component.html
我的 div 元素在哪里？
Result of the above html
不幸的是，由于 kirby-form-field 组件使用多槽内容投影，我的 div 元素没有呈现到 dom。
kirby-form-field.component.html
如何添加我的 div 元素并扩展 柯比表单域 ?
只需在 Angular 中使用指令的力量！
1. 我们首先创建一个新的 前缀指令！
我们现在可以访问我的 div 的原生元素。我只需要 kirby-form-field 父实例组件将我的 div 添加回 dom。
下一步是什么？
- 获取 kirby-form-field 实例并将 div 元素添加回 DOM。
- 添加样式以将前缀正确放置在输入字段的左侧。
- 计算输入字段中的填充。
1. 获取 kirby-form-field 实例并将 div 元素添加回 DOM
我们需要 kirby-form-field 实例，以便我们可以将我的 div 元素插入到 dom 中。我们只需使用 Renderer2 来完成此操作。
完美，添加了我的 div 元素！
You can see my div element (test) is added above the input field!
4.让我们正确定位前缀！
这很简单；我们只需使用 position 、 transform 和 left css 属性来垂直对齐我的 div 元素并在左侧。
剩下的是计算前缀元素的宽度，并在输入字段中添加左填充，这样它们就不会重叠！
5. 计算输入字段中的填充。
首先，我们需要计算我的 div 元素的宽度，我们使用原生元素上的 getBoundingClientRect 方法来计算。我们使用 setTimeout 来确保 appendChild 和 getBoundingClientRect 之间有一个小的延迟，否则宽度将为 0。
接下来，我们获取输入的 native-element 并分配 padding-left 属性。
完美的！
Looks beautiful!
我希望您了解指令以统一的方式配置 3rd 方组件的有用性以及指令如何提供帮助 清理你的组件 .
我将任务留给您在同一指令中处理前缀和后缀，请在评论中告诉我您将如何解决它！
别忘了关注我 😉
Angular 指令很强大！
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
