跳至正文
首页 » 博客 » Step-by-Step with Images to Add Ignite UI for Angular in an Existing Angular Project

Step-by-Step with Images to Add Ignite UI for Angular in an Existing Angular Project

假设您已经在处理现有的Angular项目,并且希望将Ignite UI for Angular添加到项目中。在这篇博客文章中,我们将按照一步一步的方法,在现有的Angular项目中为Angular库添加Ignite UI。

步骤1: 添加Ignite UI for Angular库

首先在项目中为Angular库添加Ignite UI。我们可以使用npm来做到这一点。因此,运行如下所示的命令来安装Angular的Ignite UI。

npm安装点火装置-角度

步骤2: 添加HammerJS

接下来,您需要安装Hammerjs,因为Angular的Ignite UI使用Hammerjs进行手势。

npm安装Hammerjs

步骤3: 修改angular.json文件

在为Angular安装了Ignite UI之后,让我们确保项目引用了Angular.json中的用于angular样式的Ignite UI和Hammerjs库。修改angular.json,如下所示:

“样式”

: ["src/styles.css","node_modules/igniteui-angular/styles/igniteui-angular.css"],"scripts": ["node_modules/hammerjs/hammer.min.js"] 

我们在样式和脚本部分添加了引用,如下图所示:

步骤4: 修改style.css

用于角度样式的Ignite UI使用材质图标。让我们在styles.css中导入它们,如下所示:

@ import的url (“https:// fonts.googleapis.com/icon?family=Material图标”); 

步骤5: 导入Hammerjs

我们已经安装了Hammerjs,接下来我们需要在main.ts中安装Hammerjs,如下所示:


进口 'hammerjs';

导入后,main.ts应具有以下导入:

通过这一步,我们在现有的Angular项目中添加了用于Angular的Ignite UI,并配置了所需的文件。

步骤6: 使用组件

我们将使用用于Angular DatePicker组件的Ignite UI来测试是否正确配置和安装了所有内容。

在组件模板上添加igxDatePicker,如下面的清单所示:

< igx-datepicker item-width = "50%"[value] = "date" [formatter] = "formatter" ></ igx-datePicker > 

然后在要配置的组件类中添加以下代码:

  • 日格式化程序
  • 月份格式化程序
公共日期: date = 日期 (Date.now ());私有dayFormatter = Intl。DateTimeFormat( 'en', { weekday: 'long' });private monthFormatter = Intl。DateTimeFormat( 'en', { month: 'long' }); 公共格式化程序 = (_: Date) => {返回'您选择了$ {这个。dayFormatter.format(_)},$ {_.getDate()}$ {这个。monthFormatter.format(_)},$ {_.getFullYear()}';} 

此外,要使用DatePicker组件,您需要添加以下模块。

进口: [BrowserModule, BrowserAnimationsModule, IgxDatePickerModule], 

运行应用程序

现在,当您运行应用程序时,您应该从应用程序中添加的用于Angular的Ignite UI获取DatePicker组件。您可以选择一个日期,并将显示。

我希望这篇文章将帮助你在现有的角项目中添加角库点燃UI。

</p