通过使用ng add来开始使用Angular的Ignite UI.

2 年 ago
科, 雅
2 minutes

根据2018/12/04（星期三）时点的信息。

使用ng add的超简单方法

由于Ignite UI for Angular在v7.0.2版本中支持ng add，因此初始设置变得非常容易。
https://github.com/IgniteUI/igniteui-angular/releases/tag/7.0.2

从新项目开始

想开始制作应用程序的人，请点击这里。

ng new my-app　--style=scss
cd my-app
ng add igniteui-angular

只需要3行就完成了！

从现有项目开始

如果您已经开发了或正在开发中的应用程序，请点击这里。

cd existing-app
ng add igniteui-angular

只需要2行就可以完成了！

如果出现错误

這是在 Windows 環境中所確認到的問題，可能會出現以下錯誤訊息。

您正在尝试添加的包不支持原理图。您可以尝试使用不同版本的包，或者联系包的作者添加ng-add的支持。

在这种情况下，您可以通过明确指定最新版本来解决问题。

ng add igniteui-angular@latest
or
ng add igniteui-angular@7.0.2

添加项目时需要注意的事项

如果执行了 nd add，则以下文件将会发生变化：
– package.json
– angular.json
– src/index.html
– src/app/app.module.ts
尤其需要注意 angular.json 的变更。

  "scripts": [
    "./node_modules/hammerjs/hammer.min.js"
  ]

将 HammerJS 添加到脚本选项中可能会导致问题。

如果您使用了依赖于HammerJS的包，例如Angular Material，在main.ts或pollyfill.ts中已经导入了该包，这可能导致重复打包。因此，请删除导入语句或删除脚本部分。

试着展示 igx-grid。

由于安装速度非常快，我想展示一些内容。我将使用Ignite UI for Angular中的主要组件之一 igx-grid。

    • src/app/app.module.ts

 

    • src/app/app.component.ts

 

    src/app/app.component.html

我会动手处理。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// igx-grid を使うためにモジュールを import
import { IgxGridModule } from 'igniteui-angular';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    // ココ
    IgxGridModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // データを用意
  data = Array.from({ length: 1000 }).map((_, i) => {
    const item = { id: i + 1 };
    Array.from({ length: 99 }).forEach((__, j) => {
      item[`column${j + 1}`] = j + 1;
    });
    return item;
  });
}

<div style="width: 100vw; height: 100vh; padding: 16px;">
  <!-- データのバインド -->
  <!-- 列定義はデータから自動生成 -->
  <igx-grid [data]="data" [autoGenerate]="true"></igx-grid>
</div>
image.png

如果您对 Ignite UI for Angular 感兴趣，请点击这里。

您可以在示範網站上試用各種不同的樣本，請嘗試多種多樣的功能！
https://jp.infragistics.com/products/ignite-ui-angular/angular/components/grid_virtualization.html

bannerAds