创建一个角组件

角组件的概述

之前在一个组件,组件是值得理解。在最基本的形式,这是一个用户界面组件的封装包括控制器和界面元素。一个角组件可以在仪表板页面使用一堆子组件,或一些小东西,比如一个自定义小部件下降的项目列表。

举个例子,这个例子展示了特别制作一个下拉日历控件。把它像任何其他输入表单控制,它将呈现UI和提供支持的逻辑。

< dd-calendar dd-height = " 400 px " dd-width =[数据集]=“600 px calData。事件”(选择)= " onSelection(事件)" > < / dd-calendar >

这个HTML片段在一个角组件模板文件允许一个属性作为输入,在这种情况下,“选项”,事件发出输出,在这种情况下选择事件。

在打印稿文件,类似的元素被定义。

@ component({选择器:dd-calendar, templateUrl: dd-calendar.component.html, styleUrls: [' dd-calendar.component.css '],提供者:[CalendarDatasourceService]})出口类DDCalendarComponent实现OnInit {@Input(“数据集”)数据集;/ /逻辑}

内部文件,@ component指定了输入dd-calendar小部件支持。

创建一个角组件

角团队也有了显著的进步,以确保用户遵循最佳实践的框架。为此,他们创造了一个CLI角,运行ng在命令行上。的ng命令允许生成的组件以及其他重要的步骤如运行一个服务器。

创建一个角组件,选择File > New >组件打开新的角CLI组件向导。如果您没有看到组件选项,切换到角透视图或选择其他,打开角文件夹。向导提供了一个学习方法CLI的功能以及简化添加新组件。

创建一个新组件

或者,您可以单击New按钮并选择组件在角文件夹中;或者,从浏览器右键单击并选择New >组件。

在角组件向导中,指定组件的名称和可选的路径生成组件的位置。

一个重要注意组件是一个特定的应遵循的惯例。文件名是小写的像my-calendar.component.ts将打印稿类命名MyCalendarComponent。注意组件后缀是自动添加的发电机。

添加新组件向导

角IDE内部的向导会自动提供上下文组件名称填写。

为组件生成的命令

在自己棱角的例子中,三个文件是自动生成的。

my-angular.component.ts包含组件的打印稿类声明。
my-angular.component.html包含的HTML结构组件。
my-angular.component.css包含任何额外的样式呈现组件时使用。

接下来,开始使用组件的元素声明在其他领域的应用程序然后到调试器在学习中心启动服务器并看到你的应用在行动。