发表于: 2019-10-20 22:47:55

1 763


今天完成的事情:学习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 不在同一个作用域,有各自单独的作用域。



返回列表 返回列表
评论

    分享到