输入：输入聚焦/不聚焦时显示不同的文本

Question

根据输入是否聚焦，在输入中显示不同文本的最简单方法是什么。

例子

• 聚焦：150
• NotFocused：150 欧元

（访问值时，我应该得到 150）

我找到了这个答案HTML5 event handling(onfocus and onfocusout) using angular 2。但是我认为必须已经有一个简单的例子，等等，但我无法用谷歌找到它:)

Answer 1

假设您将输入值保存在amount模型中，您可以执行以下操作：

<input  #amountInput 
        (focus)="amountInput.value = amount"  
        (focusout)="amountInput.value = currencyPipe.transform(amount,'EUR',true)" 
[(ngModel)]="amount">

您需要在构造函数中注入CurrencyPipe，并在组件或模块提供程序中提供它。

import { CurrencyPipe } from '@angular/common';

@Component({
  ...
  providers: [CurrencyPipe]
})

constructor(private currencyPipe:CurrencyPipe) { }

链接到working demo。