国家  china

在Angular项目中使用Wijmo 智能提示。

概述

在这一点上,您可以简单地创建一个新的Angular项目,添加对Wijmo的引用,并开始在标记中声明组件。 但是,让我们通过使用现有的示例来获得快速启动。 我们从\ samples \ Angular2 \目录打开HeaderFilters示例。 这个例子有一个网格,所以它很简单。 我们将尝试使用IntelliSense重新创建,以了解我们获得了多少帮助。

使用VSCode中的“打开文件夹”打开这个项目。 我们不需要花时间看看整个应用程序是如何工作的。 让我们开始声明组件。

在项目浏览器中,打开\ src \ app.html文件。 这是FlexGrid已经被声明的地方,我们将尝试复制它。

声明一个组件

我们开始输入一个<wj-开始插入我们的组件。 请注意,我们会立即获得所有Wijmo Angular组件的自动完成列表。 我们可以继续输入,或者从列表中选择插入FlexGrid。

设置属性

接下来,我们需要为组件添加属性。 如果我们在<wj-flex-grid之后打空格,那么我们得到一个FlexGrid控件特有的所有有效属性的列表。 这可以说是最有价值的功能,因为它通过文档获取名称/拼写权限节省了大量的时间。

由于我们只想使列标题可见,我们知道该属性可能在名称中有“标题”。 所以让我们开始输入<wj-flex-grid [header,看看我们得到了什么。 注意,我们得到了名称中任何地方都有“标题”的所有属性和事件的列表。

一些属性(使用本机类型)甚至具有自动完成的值。 例如,isReadOnly是一个布尔值。 如果我们键入<wj-flex-grid [isReadOnly] = IntelliSense提供了两个选项:true或false。

添加子组件

一旦我们有FlexGrid及其所有的属性声明,我们可以添加列。 列被添加为FlexGrid的子组件。 因此,在节点内部,我们开始绑定<wj-并查看FlexGrid特有的有效子组件列表:

总结

我们为Wijmo的Angular组件添加了智能提示到VSCode。 您可以通过下载Wijmo并安装包含的VSIX来获得此功能。 安装完成后,您将自动完成组件,属性和一些值。 智能感知可以节省大量的时间,并帮助您编写代码,而无需转到文档。 我希望你觉得这个新功能和我们一样有帮助。

更多信息请参照:

Wijmo产品网站:http://wijmo.gcpowertools.com.cn/products/wijmo-5/

Wijmo中文文档:http://wijmo.gcpowertools.com.cn/5/docs/

Wijmo中文学习教程:http://demo.gcpowertools.com.cn/wijmo5/learningwijmo/

转载声明:
欢迎将本站文章进行转载、演绎或用于商业目的,转载时请注明以下信息
文章转自:葡萄城控件产品博客,http://blog.gcpowertools.com.cn
原文地址:http://blog.gcpowertools.com.cn/post/在VSCode中添加Wijmo的Angular组件的智能提示.aspx

不允许评论