技术文章

我们对新的Angular v16版本感到非常兴奋！ 我们渴望掌握独立的 API，并利用改进的反应性、服务器端渲染和工具。在 Infragistics，我们努力为您提供最佳的用户体验，并让您随时了解最新版本的框架、平台和技术。这就是为什么我们很高兴分享我们在Angular 16.0.0 版本的 Ignite UI中包含的内容，并完全支持 Angular v16。

Angular 16.0.0 的 Ignite UI 中的所有新增功能

  将独立组件与 Ignite UI for Angular 结合使用 - 预览版

最大的区别之一是 Angular v16 引入了独立组件的概念 。这允许通过减少使用 NgModule 的需要来简化构建应用程序的方式。

 悬停在扩展面板上时显示完整字幕/标题的工具提示

16.0.0 的完整Ignite UI for Angular 更改日志 

一般的

• 所有 Ignite UI for Angular 组件现在都导出为组件。该库仍然导出，保留这些导出是为了向后兼容，但它们不再声明任何 Angular 组件的 Ignite UI。相反，他们只是导入和导出组件。请记住，这些 组件仍处于预览阶段。某些实用程序指令导出将来可能会发生变化，并且可能会从初始版本的文档中丢失，因此该功能的状态。 standalone  NgModules standalone standalone  preview 

  现在你可以这样做：

  
  

  Fullscreen

  1

  2

  3

  4

  5

  6

  7

  8

  9

  10

  // IGX_GRID_DIRECTIVES exports all grid related components and directives

  import { IGX_GRID_DIRECTIVES } from 'igniteui-angular';

  @Component({

  selector: 'app-grid-sample',

  styleUrls: ['grid.sample.scss'],

  templateUrl: 'grid.sample.html',

  standalone: true,

  imports: [IGX_GRID_DIRECTIVES, AsyncPipe]

  })

  或者

  Fullscreen12345678910// Single import of only the <igx-grid> component.import { IgxGridComponent } from 'igniteui-angular';@Component({selector: 'app-grid-sample',styleUrls: ['grid.sample.scss'],templateUrl: 'grid.sample.html',standalone: true,imports: [IgxGridComponent, AsyncPipe]})

  或者仍然

  Fullscreen12345678910// `NgModule` import of the `IgxGridModule` module, which is equivalent to IGX_GRID_DIRECTIVES in terms of exported components and directives.import { IgxGridModule } from 'igniteui-angular';@Component({selector: 'app-grid-sample',styleUrls: ['grid.sample.scss'],templateUrl: 'grid.sample.html',standalone: true,imports: [IgxGridModule, AsyncPipe]})

• IgxChip

• 行为变化：重新审视了样式，并且在选择/取消选择芯片时删除了选择容器动画 。 igxChip 

• 行为变化： 重新审视了删除按钮的行为。现在当芯片处于 某种 disabled 状态时，删除按钮被隐藏。

• IgxGrid, IgxHierarchicalGrid

• 重大更改： IgxHeaderExpandIndicatorDirective 和 IgxHeaderCollapseIndicatorDirective 指令以及 headerExpandIndicatorTemplate 和 headerCollapseIndicatorTemplate 属性已分别重命名为 IgxHeaderExpandedIndicatorDirective、IgxHeaderCollapsedIndicatorDirective、headerExpandedIndicatorTemplate 和 headerCollapsedIndicatorTemplate，以正确反映其用途。自动迁移可用并将在 ng 更新时应用。

• IgxGrid, , IgxTreeGrid IgxHierarchicalGrid

  重大更改：以下网格属性自版本 12.1.0 起已弃用，现已删除：

  此外，以下已弃用的网格事件也被删除。

  从网格 API 中删除的已弃用方法有：

• 下一页；

• 上一页；

• 分页；

• getCellByColumnVisibleIndex；

• 页面更改；

• 每页更改；

• 分页完成；

• 甚至RowCSS；

• 奇数行CSS；

• 页面；

• 寻呼；

• 每页；

• 总页数；

• 是第一页；

• 是最后一页；

新功能

• IgxChip

• 新输入可以采用以下任意值：, , , , variant  'primary' 'info' 'success' 'warning' 'danger'

• IgxExpansionPanel:

• IgxExpansionPanelTitleDirective 并显示所提供文本内容的工具提示。 IgxExpansionPanelDescriptionDirective 

• IgxDateRangePicker

• 添加了输入，可切换周数是否在其旁边可见 showWeekNumbers 

• IgxGrid, :  IgxHierarchicalGrid

• totalItemCount 现在也可以像在远程虚拟化场景中一样进行绑定。 Input 

• rowExpandedIndicatorTemplate、、、现在也可以绑定为分别提供行和标题展开/折叠指示器的模板。这是对现有等效模板指令的补充，以允许重用。 rowCollapsedIndicatorTemplate headerExpandedIndicatorTemplate headerCollapsedIndicatorTemplate  Input 

• IgxPivotGrid

• 每当通过 UI 更改任何属性时都会触发 添加 的事件。 pivotConfigurationChanged pivotConfiguration 

• ISortingExpression 现在接受可选的泛型类型参数，用于将属性的类型缩小为数据项的键，例如 fieldName  ISortingExpression<MyDataItem>

• Util

• 添加了新功能，允许使用循环引用克隆对象。 CachedDataCloneStrategy 

包起来

我们不断推出新功能、提高性能并提供稳定性改进。我们致力于为您提供最好的Angular UI 工具包 和相关见解，我们的目标是为您提供更多专业知识。除了至关重要的最新 Pivot Grid 之外，我们知道其他组件（例如 Angular Data Grid）也非常重要。这就是为什么我们发布了有用的 Angular UI 数据网格教程 来帮助您 学习如何从头开始创建功能齐全的 Angular UI 网格。