皮皮网

1.[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: core
2.ng-zorro-antd中踩过的坑
3.Util应用框架介绍
4.NG-ZORRO(Ant Design + Angular) 1.0 版本发布
5.NG-ZORRO V10 - Ant Design Of Angular 正式版发布

[Angular 组件库 NG-ZORRO 基础入门] - 源码初窥: core

       在探索和了解了典型组件的源码之后，我们进一步深入 NG-ZORRO 组件库的核心结构，发现了一个关键的策略来解决组件间共用属性、功能导致的重复编写问题。NG-ZORRO 支持近 种组件，为避免每种组件都需要重复定义相同的php导入导出excel源码属性或功能，开发团队采用了将公共方法和定义抽离至 `core` 文件夹的策略。

       当处理组件的通用属性时，我们发现像 `nzSize` 这样的属性在多个组件如 `Input` 和 `Button` 中被广泛使用。解决这一问题的方法在于引入 `types` 文件夹，这个文件夹记录了哪些组件支持特定属性，便于我们查询和重复利用。

       动画效果是 Angular 开发中常见的元素，Angular 官方文档提供了详尽的指南。NG-ZORRO 提供了多样化的动画，使页面元素呈现丰富的红包生成模式源码动态变化。例如在 `Collapse` 折叠面板组件中，通过 `nzActive` 属性操控动画状态，实现元素的展开与收起效果。这一功能在实际开发中非常实用，使用动画使页面交互更加直观。

       某些组件，如 `Tag`，在其动态删除操作中应用了淡入淡出动画，该动画机制相较于需要单独配置的状态传递更为简便，直接提升视觉效果和用户体验。NG-ZORRO 内含多种动画类型，如 `moveUpMotion` 和 `slideMotion`，通过探索源码可以轻易找到使用方式。

       对于不希望使用动画的场景，NG-ZORRO 提供了 `NzNoAnimationDirective`，刷影票源码允许开发者在模板层面对特定元素禁用动画效果。通过替换 `BrowserAnimationsModule` 为 `NoopAnimationsModule`，可实现全局禁用动画。

       总结这一系列核心文件夹——`core` 包含了如 `types` 和 `animations` 等内容，对于项目开发而言，应考虑抽离公共部分，实现跨组件复用，以减少代码冗余和提高开发效率。通过借鉴 NG-ZORRO 的实践，开发者可以优化代码结构，提升组件复用性，同时保持代码的简洁性和易维护性。

ng-zorro-antd中踩过的坑

       在前端开发过程中，我们常常会借助阿里开源的组件库ant-design，它提供的趋势指标CPJ源码组件功能强大，能满足大多数需求，直接使用即可，非常便捷。当然，一些公司会对此进行二次开发，以打造具有独特风格的产品。

       本文将不涉及高深的技术细节，也不深入探讨底层源码，仅分享一些在项目中遇到的小问题。

       表格（table）——师傅以为是组件库的bug，没想到……

       不知道正在阅读本文的读者是否遇到过这样的情况：

       这个空状态怎么总是和我们作对呢？为什么就不能满足我们的预期呢？其实，它偶尔也会满足我们的要求。

       出现这种问题的原因实际上非常简单。回想一下，我们在删除和添加表项时，火苗视频编辑源码是否是这样操作的：

       看起来这段代码没有问题，但要知道的是，push()和splice()这两个函数是直接在原始数组上操作的，会改变原数组。然而，它们会改变数组的引用吗？答案是：不会。

       在angular的设计中，onChanges()监听的是哪种变化呢？是引用。

       因此，只要我们改变引用地址，就可以解决这个问题。

       这里提供的方法简单、快速、有效，非常实用。

       读完本文，你是否有一种豁然开朗的感觉呢？

Util应用框架介绍

       Util应用框架是一个面向.NET平台的开发框架，旨在优化中小团队的开发流程。它由工具类、分层架构基类、UI组件、代码生成模板和权限管理等组件构成，为开发者提供一站式解决方案。

       最新版本7.x与.NET的稳定版保持同步更新，相较于早期版本，7.x进行了全面重构，提升了模块化水平，去除了历史遗留的负担，代码结构更加简洁。同时，它支持了本地化、多租户等常见需求，增强了对常用功能的扩展。

       UI基础组件采用NgZorro，最新版本封装了大部分组件，并对常用功能进行了增强。在微服务架构方面，Util紧跟行业趋势，集成并封装了Dapr微服务框架的几个核心组件，以支持分布式系统的开发。

       代码生成方面，以前使用收费的CodeSmith组件，现在改用Razor引擎开发的简易代码生成器。这个命令行工具仅需简单配置，即可快速生成基于Util的项目结构和基础代码。

       由于Github访问速度慢，Util项目的更新同步到Gitee平台，以确保国内开发者能及时获取最新版本。未来，文档建设将成为框架发展的重要方向，同时将推出Web API项目的使用指南。

       如需加入讨论和交流，欢迎加入Util应用框架交流群：。

NG-ZORRO(Ant Design + Angular) 1.0 版本发布

       NG-ZORRO, an amalgamation of Ant Design and Angular, recently launched its 1.0 version after a period of months. During this timeframe, the team received contributions from over contributors with a total of commits. The 1.0 version, built on Angular ^6.0.0 and RxJS ^6.0.0, integrates seamlessly with @angular/cli, enhances documentation, simplifies the learning curve, adheres to the latest design standards, and fully synchronizes with all Ant Design components. It also restructures some components from the previous version (0.7.1) without introducing any disruptive updates. Upgrading to the latest Angular 6.0 is a minimal task, with detailed steps available in the official upgrade guide and the card-shaped ng-zorro-antd guide.

       NG-ZORRO 1.0 supports Schematics, enabling quick project setup with a simple command in new Angular projects. Custom themes and international languages can be set up by adding --theme and --in options during initialization. Beyond project initialization, the version supports code generation, allowing users to swiftly generate components like login forms with a command. Users can explore more configuration details in the official documentation. A series of practical projects are prepared to help users get started with ng-zorro-antd and Angular, scheduled to be released on the Zhihu column, inviting attention.

       Adopting bot and Ant Design design systems, NG-ZORRO 1.0 ensures the full availability of Ant Design's extensive design assets. It supports both Ant Design Library and Ant UX designs, enabling perfect reproduction. The version also includes CSS style file output, enhancing the customization of themes. Users can now use ng-zorro-antd with any CSS preprocessor, ensuring compatibility with various CSS frameworks.

       Code refactoring in NG-ZORRO 1.0 maintains compatibility with the previous version. Tooltip, Popover, PopConfirm components recommend Directive usage, with the older methods still supported. The introduction of Angular 6.0's new features means that forRoot is no longer necessary, allowing NgZorroAntdModule to be imported directly in any module, with the older forRoot method also remaining compatible. All third-party dependencies except @angular packages (only date-fns) support Tree Shaking, enabling the automatic trimming of unused components during the build process.

       NG-ZORRO 1.0 boasts a total of test cases, with a testing coverage of over %. It supports running environments like webpack, rollup, and @angular/cli, ensuring high-quality development regardless of the user's chosen environment. The test results are available on Travis CI. The online documentation has added type information to each component, clearly marked API attributes, and allows code examples to be edited directly on stackblitz. Users can suggest edits to the documentation through the "edit" button. The repository and official website of NG-ZORRO are accessible at NG-ZORRO/ng-zorro-antd, Ant Design Of Angular, and Ant Design Design Language, respectively. For users seeking support, a self-service group is available on DingTalk.

NG-ZORRO V - Ant Design Of Angular 正式版发布

       ng-zorro-antd 的最新正式版 .0.0 已经发布，这次更新基于 Angular 和 TypeScript 4，同步采用 Ant Design 4.6 的设计。此次升级包括了 多个 Bug 修复和 项新功能，同时移除了过时代码，未来 .x 版本会带来更多增强。

       新版本引入了试验性的 Pipes 模块，如 Aggregate、Ellipsis 和 SafeNull，以满足日常开发中的常用需求。

       在组件交互上，新的 Tabs 组件遵循了 Ant Design 的设计，取消了 nzShowPagination、nzOnNextClick 和 nzOnPrevClick 等API，提升用户体验。

       新增了 Week、Month 和 Year 范围选择器，功能更加丰富。同时，弃用了部分旧API，优化了包体积和执行效率。

       值得注意的是，一级入口及 NgZorroAntdModule 已经被移除，以提高编译速度和接口命名的清晰度，详情请参阅完整 CHANGELOG。

       升级指南

       针对 9.x 版本的用户，直接升级到 .x 版本，但8.x及更早版本的用户需先升级到 9.x。

1. 迁移到二级入口

       从 v8 开始，建议移除 NgZorroAntdModule，可使用 NG-ZORRO/nz-tslint-rules 检查和修复项目中的一级入口。

       安装 NG-ZORRO TSLint

       配置 tslint.json

       运行 TSLint 并处理一级入口问题

2. 升级相关依赖

3. 查阅 NG-ZORRO CHANGELOG 获取详细更新信息