angular的NG-ZORRO组件的使用心得

目录

angular核心页面介绍

---

NG-ZORRO组件是angular的一种UI组件，相比JQuery的css、js、html页面，angular的风格更类似后端的springmvc架构。下面一一介绍angular的核心页面：html、less、components.ts、service.ts.

html

这里并不是单纯的用<div>等标签进行页面布局，还可以自动对页面进行动态内容渲染，有些操作在Jquery里是js完成的，比如表格内容的填充：

这里值得一提的是：组件和指令都是以nz-开头，比如<nz-table>、[nzData]等。

html是通过component.ts文件获取数据的，比如上文向表格填充数据，通过【nzdata】指令指定通过component.ts的“tableDataSet”属性获取数据

components.ts

页面上的显示逻辑，比如层级显示顺序的控制等放在这个页面里。总之是用于从service.ts中拿到数据然后通过一定逻辑给html。在component.ts中定义的变量（用于接收数据）可以直接放在html页面中使用，比如：

components和html之间是一种双向绑定，这也是angular的mvvc如下图所述：

service.ts

service.ts负责根据联系后端的接口，从后端获取数据交给components.ts，同时把components交给它的数据返回给后端。总之，它只负责传递数据，不进行任何业务逻辑。比如：

component.less

相当于css。