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

Question

在输入中显示不同文本的最简单方法是什么，具体取决于它是否聚焦。

实施例

• 重点：150
• NotFocused：150€

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

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

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。