我可以使用自定義構建的 Angular 組件作為輸入字段的占位符嗎

Question

我是 Angular 的新手。 我正在做一個項目。 我從頭開始在Angular 6創建了一個自定義month-picker組件（* 因為我不允許外包任何 3rd 方庫，甚至沒有bootstrap ， fontawesome或primeng ），為此我想要一個簡單的文本字段，我想要顯示一個簡單的日歷圖標。 我嘗試了幾種解決方案。 這是最相關的，但他們使用的是AngularJS 。 這也有些不同。 這也不是很有用。 這是我的代碼。 我還創建了一個CodePen 。

時間選擇器.component.html

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

注意： <our-icon>是我組織自己的圖標庫。 我不被允許超越這一點。

我在 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>

演示。