带图像支持的角度 2 输入答案

【问题标题】：angular 2 input with image support带图像支持的角度 2 输入
【发布时间】：2017-09-11 12:32:35
【问题描述】：

我想创建一个 Angular 2 的聊天应用，我需要在输入字段中显示 Emoji，但 html 不支持在输入字段中显示图像。
我也尝试过这种方式，但没有奏效：

<div contenteditable="true"
     [innerHtml]="msgText"
     class="form-control"
     (keyup)="enable_disable_sendBtn()"
     (keypress)="handle_enter_key($event)"
     #messageBox
     (input)="msgText = $event.target.innerText">
</div>

我已经尝试过this，但我没有收到来自tslint 的错误并说：use @HostListener Or @HostBinding instead of host。
谁能帮我在文本输入中显示 emjis？

【问题讨论】：

“但没有工作”信息不足。预期的行为是什么？实际行为是什么？有任何错误消息吗？
也许你想使用emojione.com 或类似的
@GünterZöchbauer 我希望显示图像并且它会显示，但问题是当我尝试写 amir 它写 rima 所以问题是每当按下一个键（或 keyup 或 keydown，我不知道问题是什么）插入符号进入第一个输入
此行为看起来与发布的代码无关。

标签： angular angular2-template

【解决方案1】：

终于找到了解决办法。解决方案是一种方式绑定，因为用户在contenteditable 中写了一些东西，而我只需要在需要时获取innerHTML，例如：何时发送内容。
同样，当我想向内容添加图像时，只需添加到 contenteditable 并且当我需要发送（或类似的东西）时，我会得到 innerHTML 。

<div contenteditable="true"
   class="form-control"
   id="messageBox"
   #messageBox
   (keydown.enter)="handle_enter_key($event)"
   (input)="handleMessageBoxInput($event)">
</div>

【讨论】：