angular轮播图在ie显示不友好_大幅度提升性能 NG-ZORRO(Ant Design + Angular) 7.0 版本发布...

ng-zorro-antd 在 2018 年最受欢迎的 JavaScript 项目（2018 JavaScript Rising Stars）的 Angular 生态分类榜上有名。去看看。

官网地址：https://ng.ant.design/docs/introduce/zh

GitHub地址：NG-ZORRO/ng-zorro-antd

距离上一个稳定版本的发布已经有 3 个月的时间，从 7.0 版本开始，ng-zorro-antd 将和其他 Angular 第三方库一样，保持与 Angular 的主版本号一致。按照路线图的规划，我们在 7.0 前三个 rc 版本的基础上增加了 103 个 commits，目前我们已经按计划完成了第一阶段的 Milestone，包含但不限于以下内容

• 全部组件默认工作在 OnPush 模式下，大幅度提升了组件性能
• 完成 web animation 与 antd 动画的对应，并支持对每个组件的动画进行全局和单独配置
• 增加了 Empty、Statistic、CountDown、Comment 等实用组件
• 支持了最新的 CDK 特性，Table 等组件支持虚拟滚动
• 增加了大量新的功能，并修复了大部分之前组件存在的问题
• 日期相关组件支持可选的ISO标准日期格式化（依赖Date-fns库），解决周数算法不一致等问题
• 更换了新的全局滚动策略，Modal Drawer 在特殊情况下弹出时页面不再抖动
• 更加严格的 TsLint 校验
• 全新的 LOGO 和 文档系统

NG-ZORRO 全新 LOGO 感谢 AntD 设计团队

我们会在 7.0 正式版本发布后立刻进行第二阶段的 Milestone 工作，该部分规划包含完整的服务端渲染支持，a11y，独立的包引入机制，全局的组件配置方式，输入数据的动态校验等等，这些功能会在随后的版本中逐步发布。

升级指南：

第一步：升级 Angular 及配套环境至最新版本

第二步：升级 ng-zorro-antd 至 7.0 正式版

注意：7.0 正式版有三处更新可能需要修改少量业务代码后才能使用

1. 7.0 正式版绝大部分组件都默认工作在 OnPush 模式下，OnPush 模式下的组件不会对 ​@​Input() 的可变对象 (mutate) 情况进行响应，所有组件 ​@Input​ 内容应修改为不可变对象 (immutable)，具体情况见最后示例代码，正确使用不可变对象可以大幅度优化应用性能。
2. 我们修正了 Select 组件中 [nzDropdownMatchSelectWidth] 的实际含义，与之前版本相反。
3. Input Group Search 模式下 button 传入由 nzSuffix 换为 nzAddOnAfter

Bug Fixes

• affix: trigger 元素 resize 时应该重置 placeholder 大小 (#2835) (7068a5e), closes #2818
• anchor: 修复组件销毁后调用 detectChanges 的问题 (#2864) (0e5c937), closes #2860
• animation: 修复 路由变化时动画触发的问题 (#2895) (e39f6bf)
• build: 修复 build target 为 ES6 时的问题 (#2921) (ab62b40), closes #2893
• carousel: 修复在 modal 或 card 中不渲染的问题 (#2699) (e092bf0), closes #2387 #2226
• carousel: 修复轮播图不能点击的问题 (#2699) (e092bf0), closes #2631
• carousel: 修复轮播图在窗口 resize 时内容错位的问题 (#2699) (e092bf0), closes #2158
• cascader: 修复当 nzOptions 为空时搜索错误的问题 (#2846) (e33cc50), closes #2784
• cascader: 修复子节点 loading 状态未变化的问题 (#2986) (b87e8bb)
• core: 修复 CDK 样式冲突 (#2917) (37cf6f3), closes #2874
• date-picker & calendar & time-picker: 提供新的可选方式来解决不符合ISO标准算法的周数 (#2819) (e1bce41), closes #2819 #2406
• drawer: 修复 body overflow 的问题 (#2867) (1e081f0), closes #2227 #2615
• grid: 修复 Grid 响应式问题 (#2915) (ab05619), closes #2908
• i18n: 修复法语文件中的字段丢失 (#2586) (#2737) (c821d56)
• i18n: 导出 da_DK 以及更新对于文档 (#2599) (6554cf5)
• icon: 修复错误重新的渲染 (#2912) (6dd3cbf), closes #2911
• input: 修复对新 icon API 兼容性的问题 (#2841) (3c954cb)
• menu & dropdown: 修复Firefox下定位问题 (#2816) (09f21d0), closes #2834
• modal, drawer: 修复 IE/Edge 下 SVG blur/focus 方法找不到的问题 (#2869) (7487a7e), closes #2388
• modal: 修复 body overflow 的问题 (#2869) (7487a7e), closes #2612
• modal: 修复 OnPush 容器下无法关闭蒙层 (#2869) (7487a7e), closes #2643
• radio: 在 label 中子元素无法聚焦 (#2850) (58743b8), closes #2774
• select: 修复 nzScrollToBottom 在浏览器缩放下的问题 (#2741)
• select: 修复 多选情况下 Input 框大小变化问题 (#2741)
• select: 修复 定位到多个 Option 的问题 (#2741)
• switch: 修复当 loading or disabled 时切换的问题 (#2896) (a67984c), closes #2787
• table: 修复 Firefox 浏览器下边框样式问题 (#2862) (074083e)
• table: 修复 ngIf 情况下 th 排序事件不触发的问题 (#2862) (074083e)
• table: 修复 靠右对齐的固定多列的问题 (#2862) (074083e)
• time-picker: 将清除按钮调整放置到外层输入框处 (#2948) (ffb6665)
• tooltip: 修复 nzTitle 没有更新的问题 (#2698) (f6dfbd9), closes #2695
• tree-select: 修复 overlay 层级覆盖问题 (#2764) (599ae1a), closes #2730
• tree: 修复 loading 图标位置偏移问题 (#1998) (36c91ac), closes #1998
• tree: 修复 nzCheckStrictly 状态下父子节点关联问题 (#2655 #2370) (36c91ac), closes #2655 #2370
• tree: 修复 nzShowIcon 为 false icon 仍然有效问题 (#2724) (36c91ac), closes #2724
• tree: 修复 setChecked 方法状态同步问题 (#2273) (36c91ac), closes #2273
• tree: 修复展开动画 (#2989) (5142d18)

Features

• auto-complete: 元素 blur 时关闭面板 (#2916) (1e075f9), closes #2885
• badge: 支持 nzCount 传入 TemplateRef (#2880) (fd0d91c)
• cascader: 当级联选择器打开时调整位置 (#2836) (289ba54), closes #2181 #2809
• collapse: 支持自定义 panel 的图标 (#2783) (a530f80)
• comment: 新增 comment 组件 (14859c8), closes #2731
• date-picker & calendar: 支持所有日期组件的周起始时间 (#2819) (e1bce41), closes #2293 #2073
• date-picker: year-picker 支持 nzDisabledDate 选项 (#2949) (71dda9b), closes #2194
• empty: 新增空状态组件 (#2722) (8906dff), closes #2711
• icon: 支持旋转 (#2891) (07f76af), closes #2888
• icon: 更新依赖以支持命名空间功能 (#2641) (a2000fa)
• layout: 支持 zeroTrigger 属性 (#2938) (4e4231d), closes #1950 #1951
• menu & dropdown: 支持递归数据样例 (#2816) (09f21d0), closes #1697
• modal: 支持 nzOkDisabled 和 nzCancelDisabled (#2856) (fa6a8e9), closes #1838
• notification: 使用模板时可传入上下文 (#2926) (51940f7), closes #2755
• popconfirm: 支持自定义图标 (#2964) (ff030ff), closes #2196
• rate: 增加对 tooltip 的支持 (#2794) (e121bd3)
• select: 支持 automatic tokenization (#2741)
• select: 支持 maxTagCount & maxTagCountPlaceholder (#2741)
• slider: 支持通过 nzTooltipVisible 控制 tooltip 出现的时机 (#2930) (d3e61d4), closes #2373
• statistic: 新增统计组件 (#2760) (abb9ae4), closes #2754
• table: 支持 nzItemRender 属性 (#2862) (074083e)
• table: 支持 pagination 位置变换 (#2862) (074083e)
• table: 支持 td th 对齐树形 (#2862) (074083e)
• tabs: 支持 tab 内容懒加载 (#2968)
• tree-select: 支持设置 nzNotFoundContent (#2740) (d9055f5)
• tree: 搜索功能支持隐藏未匹配节点 (#2208) (36c91ac), closes #2208
• tree: 支持删除节点等操作(状态同步) (#1399 #2384) (36c91ac), closes #1399 #2384
• tree: 支持按 key 获取 NzTreeNode 实例 (#2455) (36c91ac), closes #2455
• upload: 支持非 image 格式的文件预览 (#2709) (4c41715)

示例代码：

在如下代码中，this.value.push('jack') 不会被 Angular 下的 OnPush 组件响应，需要使用 this.value = [ ...this.value, 'jack' ] 组件才会进行响应。

延伸阅读：These 5 articles will make you an Angular Change Detection expert

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

@Component({
  selector: 'nz-demo-select-basic',
  template: `
    <nz-select [(ngModel)]="value" nzMode="multiple">
      <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
      <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
    </nz-select>
  `
})
export class NzDemoSelectBasicComponent implements OnInit {
  value = [ 'lucy' ];

  ngOnInit(): void {
    setTimeout(() => {
      // this.value.push('jack'); // mutate 数据不会被组件响应
      this.value = [ ...this.value, 'jack' ]; // 正确使用方式
    }, 3000);
  }
}