Angular5学习笔记 - 配置NG-ZORRO（八）

一、在项目中集成组件

 $ cd PROJECT_NAME
$ npm install ng -zorro-antd --save

 

二、在项目中导入组件

直接用下面的代码替换  /src/app/app.module.ts  的内容

注意：在根 module 中需要使用  NgZorroAntdModule.forRoot() ，在子 module 需要使用  NgZorroAntdModule

  import  { BrowserModule  }  from  \'@angular/platform-browser\' ;
 import  { BrowserAnimationsModule  }  from  \'@angular/platform-browser/animations\' ;
 import  { NgModule  }  from  \'@angular/core\' ;
 import  { FormsModule  }  from  \'@angular/forms\' ;
 import  { HttpClientModule  }  from  \'@angular/common/http\' ;
 import  { NgZorroAntdModule  }  from  \'ng-zorro-antd\' ;
 import  { AppComponent  }  from  \'./app.component\' ;

@ NgModule ( {
  declarations :  [
    AppComponent
   ] ,
  imports :  [
    BrowserModule ,
    FormsModule ,
    HttpClientModule ,
    BrowserAnimationsModule ,
    NgZorroAntdModule . forRoot ( )
   ] ,
  bootstrap :  [AppComponent ]
 } )
 export  class  AppModule  {  }
                                                                        

这样就成功在全局引入了 ng-zorro-antd。

NgZorroAntdModule.forRoot()  方法能够接受一个可选的配置对象，用于引入外部的字体文件，类型为  { extraFontName: string, extraFontUrl: string } 。

 

三、在项目中使用组件

用下面的代码追加至  /src/app/app.component.html文件末尾

<button nz-button [nzType]="\'primary\'">primary</button>

<button nz-button [nzType]="\'dashed\'">dashed</button>

<button nz-button [nzType]="\'default\'">default</button>

<button nz-button [nzType]="\'danger\'">danger</button>

<button nz-button [nzShape]="\'default\'">defaultShape</button>

<button nz-button [nzShape]="\'circle\'">O</button>

<button nz-button [nzSize]="\'large\'">L</button>

<button nz-button [nzSize]="\'default\'">M</button>

<button nz-button [nzSize]="\'small\'">S</button>

<button nz-button [nzGhost]="true">L</button>

<button nz-button [nzLoading]="true">L</button>

 

四、效果预览

 

查看更多关于Angular5学习笔记 - 配置NG-ZORRO（八）的详细内容...