说明
在页面上的输入框外单击可使输入框失去焦点。
范例
以下示例说明了Angular 2用户对blur事件的输入：
angular2userinputonblursystem.config (
transpiler: 'typescript '，
类型选项3360 { emitdecoratormetadata : true }，
packages : { ' app ' : { default extension : ' ts }
)；
system.import (/angular2/src/PP/user _ input _ onblur _ event ) )
. then(null，console.error.bind ) console )；
加载.
上面的代码包括以下配置选项：您可以使用typescript版本配置index.html文件。 在使用transpiler选项执行APP发布之前，SystemJS会将TypeScript转换为JavaScript。
如果在执行APP化之前未将其翻译为JavaScript，则浏览器可能会显示隐藏的编译器警告和错误。
设置emitDecoratorMetadata选项时，TypeScript会为代码中的每个类生成元数据。 如果不指定此选项，将生成大量未使用的元数据，这会影响文件大小和APP应用程序运行时的影响。
Angular 2包含来自app文件夹的软件包，文件扩展名为. ts。
然后，从APP应用程序文件夹中加载主组件文件。 如果找不到主要组件文件，控制台将显示错误。
当Angular调用main.ts的启动函数时，它会读取Component元数据，找到app选择器，找到元素app标记，然后在这些标记之间加载app设置。
要执行代码，需要以下TypeScript(.ts文件，并且必须将其保存在APP应用程序文件夹下： user _ input _ onblur _ event.ts import { bootstrap } from ' angular2/platform/browser '；
import { onblureventcomponent } from './user _ onblur _ event.com ponent '；
bootstrap(onblureventcomponent；
然后，输入user _ onblur _ event.com ponent.ts import { component } from ' angular2/core '；
@component({
选择程序： ' onblur-event '，
模板： `
userinputonblurevent (keyup.enter )='values=myval.value '
(blur )='values=myval.value '
{{values}}
`
() )
exportclassonblureventcomponent {
values=' '；
}@Component是一种使用配置对象创建组件及其视图的装饰。
当用户离开表单域时，Angular 2将调用keyup事件，而onblur事件将失去输入框的焦点。
输出功率
让我们来看看上面的代码是如何工作的。 将上述HTML代码另存为index.html文件，并使用包含. ts文件的APP应用程序文件夹，如在环境章节中所创建的。
打开终端窗口，然后输入以下命令： npm start
稍后，浏览器选项卡将打开并显示输出，如下所示：
或者，您可以使用其他方法运行此文件。 将上述HTML代码作为user_input_onblur.html文件保存在服务器的根文件夹中。
将此HTML文件打开为http://localhost/user _ input _ onblur.html，并显示与以下类似的输出：
此示例说明当用户离开表单字段且输入框失去焦点时，onblur事件的功能。