今天完成的事情:学习NG-ZORRO组件库的使用
明天计划的事情:
遇到的问题:
收获:
1、在app.moudel中引入对应的模块,然后安装相应的依赖$ npm install ng-zorro-antd --save
2、引入模块
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgZorroAntdModule,NZ_I18N,zh_CN } from 'ng-zorro-antd';
import { FenyeComponent } from './components/fenye/fenye.component';
import { FormsModule } from '@angular/forms';
registerLocaleData(zh);
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
ArticleComponent,
StrLengthPipe,
StrLengthstatusPipe,
WelcomeComponent,
AddarticleComponent,
FenyeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
BrowserAnimationsModule,
NgZorroAntdModule,
FormsModule
],
providers: [
{ provide: NZ_I18N, useValue: zh_CN }
],
我这里是传统的全部引入,占用的资源较大
还有一种方法就是单纯的使用某个组件,值引入这个组件的对应的文件
在 module 文件里:
import { NzButtonModule } from 'ng-zorro-antd/button';
imports: [
NzButtonModule
]
导入对应组件的样式
@import "~ng-zorro-antd/组件/style/entry.less"; /* 引入组件样式 */
单独引入,打包体积较小,按照实际引用情况,可能被打包到懒加载 module 中
如果你之前全部引入过就不需要单独引入了
3、分页组件的使用
<nz-pagination (nzPageIndexChange)="page($event)" [nzPageIndex]="1" [nzTotal]="totle" nzShowQuickJumper></nz-pagination>
[nzShowQuickJumper] 是否可以快速跳转至某页 默认false
[nzTotal] 数据总数
[nzPageIndex] 当前页数,可双向绑定
[nzPageSize] 每页条数 ,可双向绑定
(nzPageIndexChange) 页码改变的回调
记录ES6的一些知识点:
for 循环有一个特别之处,就是设置循环变量的部分是一个父作用域,而循环体内部是一个单独的子作用域。
for (let i = 0; i < 3; i++) {
let i = 'abc';
console.log(i);
}
// abc
// abc
// abc
上面代码正确运行,输出了 3 次 abc 。这表明函数内部的变量 i 与循环变量 i 不在同一个作用域,有各自单独的作用域。
评论