html - 我可以使用自定义构建的 Angular 组件作为输入字段的占位符吗

Question

我是 Angular 的新手。我正在做一个元素。我创建了一个自定义 month-picker Angular 6 中的组件从头开始(*因为我不允许外包任何第三方库，甚至不包括 bootstrap 、 fontawesome 或 primeng )为此我想要一个简单的文本字段，我想在其中显示一个简单的日历图标.我尝试了几种解决方案。 This最相关，但他们使用的是 AngularJS . This也有些不同。 This也不是很有用。这是我的代码。我还创建了一个 CodePen .

timeselector.component.html

<our-icon class="icon-our-calendar"></our-icon>
<input class="input-field" type="text">

注意: <our-icon>是我的组织自己的图标库。我不允许超出此范围。

我正在尝试 this在 CodePen 上，但对图标使用了一些十六进制代码。无论如何我可以添加 our-icon标记为输入字段的占位符，如下所示:

<input class="input-field" type="text" placeholder="<our-icon class="icon-our-calendar"></our-icon>">

我知道这是完全错误的，但只是想让您了解我的实际意思。

但首先我想问问它是否可行，或者我只是在浪费大家的时间。请给我一些指导。

Answer 1

这只是一个 css 问题。将图标和输入视为不同的元素，而不是相互结合。

为图标制作 position: absolute 并根据图标的大小应用填充，以便在图标之后开始输入。

CSS

input {
    width: 450px;
    padding: 5px 35px;
    height: 25px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper .input-icon {
  position: absolute;
  padding: 12px;
}

模板

<div class="input-wrapper">
  <app-our-icon class="input-icon"></app-our-icon>
  <input>
</div>

Demo.