Angular 2创建自定义组件Typescript实例

在介绍了一个最简单的Hello World实例后, 让我们再更进一步看看在Angular 2里是如何创建自定义组件。 在这个例子中所使用的Angular 2版本依然是2 2.0.0-beta.0。 如需要此实例的Javascript版本,请移步这里

 

在本教程里, 我们将使用Typescript创建一个带有Input及Output的组件。此组件类似表单里最基本元素,带有一个标签及输入框。当检测到用户输入改变时,此组件会触发一个 valueChanged 事件。在此例子中我们也将利用这个事件来实现变更检测。对于Angular 2的变更检测机制以及双向绑定,我将另外发一篇文章来详细介绍。

 

当组件创建完成后,我们将可以按如下所示方式使用。

下面这个截图就是此例子的最终运行结果。

Angular 2创建自定义组件Typescript运行结果

那么就正式开始教程了。

 

文件结构

下图所示为此例子的文件结构。 需下载源代码请点击这里

Angular 2创建自定义组件Typescript文件结构

boot.ts

跟其他例子一样, 我们仍然使用这个 boot.ts文件来引导Angular程序。

app.component.ts

这个是我们的主程序组件。您可能已经发现,对比上一个Hello World实例,这个 AppCompnent 有了一些新东西。

app.component.tpl.html

这个是主程序组件的模板。 在这个模板里,我们使用了<custom-input/>组件,获取用户输入的值来后显示在其下面。在代码里,您可以看到

  • label  参数被赋予了string “Name”,
  • value  参数跟person.name绑定,
  • 同时我们还把 valueChanged 事件跟我们上面所定义的事件响应方法 onValueChanged 绑定了

custom-input.component.ts

这个就是我们的自定义组件了。这个自定义组件有2个 inputs和1个output。这个组件里的事件响应方法onInputChange(负责响应keyup事件。 在后面的模板文件里会讲到)将接着发送 valueChanged 事件并且附上新值。

custom-input.component.tpl.html

这个是自定义组件 <custom-input/> 所使用的模板

index.html

最后,是把以上所有组合起来的index.html。

 

以上就是此实例的全部步骤,到这里您应该可以创建属于你自己的自定义组件了。 再次附上此实例的源代码

Resources


facebooktwittergoogle_plusredditlinkedin

Wayne Hong

Passionate Java full stack developer.