Angular-Ant Desigin

1、如果已经有 angulat 项目,直接安装 antd 这个插件然后使用:



npm install ng-zorro-antd --save / cnpm install ng-zorro-antd --save



 2、app.module.ts 文件导入



import { NgModule } from '@angular/core';

import { registerLocaleData } from '@angular/common';

import { BrowserModule } from '@angular/platform-browser';

import { DragDropModule } from '@angular/cdk/drag-drop';

import { ScrollingModule } from '@angular/cdk/scrolling';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';

import en from '@angular/common/locales/en';

import { NZ_ICONS } from 'ng-zorro-antd/icon';

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

import { IconDefinition } from '@ant-design/icons-angular';

import * as AllIcons from '@ant-design/icons-angular/icons';

import { DemoNgZorroAntdModule } from './ng-zorro-antd.module';

import { AppComponent } from './app.component';

registerLocaleData(en);

const antDesignIcons = AllIcons as {

  [key: string]: IconDefinition;

};

const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key])

@NgModule({

  declarations: [

    AppComponent

  ],

  imports:      [

    BrowserModule,FormsModule,

    HttpClientModule,

    HttpClientJsonpModule,

    ReactiveFormsModule,

    DemoNgZorroAntdModule,

    BrowserAnimationsModule,

    ScrollingModule,

    DragDropModule

  ],

bootstrap:    [ AppComponent ],

providers  : [ { provide: NZ_I18N, useValue: en_US }, { provide: NZ_ICONS, useValue: icons } ]

})

export class AppModule { }



新建一个文件  ng-zorro-antd.module.ts



import { NgModule } from '@angular/core';

import { NzAffixModule } from 'ng-zorro-antd/affix';

import { NzAlertModule } from 'ng-zorro-antd/alert';

import { NzAnchorModule } from 'ng-zorro-antd/anchor';

import { NzAutocompleteModule } from 'ng-zorro-antd/auto-complete';

import { NzAvatarModule } from 'ng-zorro-antd/avatar';

import { NzBackTopModule } from 'ng-zorro-antd/back-top';

import { NzBadgeModule } from 'ng-zorro-antd/badge';

import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';

import { NzButtonModule } from 'ng-zorro-antd/button';

import { NzCalendarModule } from 'ng-zorro-antd/calendar';

import { NzCardModule } from 'ng-zorro-antd/card';

import { NzCarouselModule } from 'ng-zorro-antd/carousel';

import { NzCascaderModule } from 'ng-zorro-antd/cascader';

import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';

import { NzCollapseModule } from 'ng-zorro-antd/collapse';

import { NzCommentModule } from 'ng-zorro-antd/comment';

import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';

import { NzTransButtonModule } from 'ng-zorro-antd/core/trans-button';

import { NzWaveModule } from 'ng-zorro-antd/core/wave';

import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';

import { NzDescriptionsModule } from 'ng-zorro-antd/descriptions';

import { NzDividerModule } from 'ng-zorro-antd/divider';

import { NzDrawerModule } from 'ng-zorro-antd/drawer';

import { NzDropDownModule } from 'ng-zorro-antd/dropdown';

import { NzEmptyModule } from 'ng-zorro-antd/empty';

import { NzFormModule } from 'ng-zorro-antd/form';

import { NzGridModule } from 'ng-zorro-antd/grid';

import { NzI18nModule } from 'ng-zorro-antd/i18n';

import { NzIconModule } from 'ng-zorro-antd/icon';

import { NzInputModule } from 'ng-zorro-antd/input';

import { NzInputNumberModule } from 'ng-zorro-antd/input-number';

import { NzLayoutModule } from 'ng-zorro-antd/layout';

import { NzListModule } from 'ng-zorro-antd/list';

import { NzMentionModule } from 'ng-zorro-antd/mention';

import { NzMenuModule } from 'ng-zorro-antd/menu';

import { NzMessageModule } from 'ng-zorro-antd/message';

import { NzModalModule } from 'ng-zorro-antd/modal';

import { NzNotificationModule } from 'ng-zorro-antd/notification';

import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';

import { NzPaginationModule } from 'ng-zorro-antd/pagination';

import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';

import { NzPopoverModule } from 'ng-zorro-antd/popover';

import { NzProgressModule } from 'ng-zorro-antd/progress';

import { NzRadioModule } from 'ng-zorro-antd/radio';

import { NzRateModule } from 'ng-zorro-antd/rate';

import { NzResultModule } from 'ng-zorro-antd/result';

import { NzSelectModule } from 'ng-zorro-antd/select';

import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';

import { NzSliderModule } from 'ng-zorro-antd/slider';

import { NzSpinModule } from 'ng-zorro-antd/spin';

import { NzStatisticModule } from 'ng-zorro-antd/statistic';

import { NzStepsModule } from 'ng-zorro-antd/steps';

import { NzSwitchModule } from 'ng-zorro-antd/switch';

import { NzTableModule } from 'ng-zorro-antd/table';

import { NzTabsModule } from 'ng-zorro-antd/tabs';

import { NzTagModule } from 'ng-zorro-antd/tag';

import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';

import { NzTimelineModule } from 'ng-zorro-antd/timeline';

import { NzToolTipModule } from 'ng-zorro-antd/tooltip';

import { NzTransferModule } from 'ng-zorro-antd/transfer';

import { NzTreeModule } from 'ng-zorro-antd/tree';

import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';

import { NzTypographyModule } from 'ng-zorro-antd/typography';

import { NzUploadModule } from 'ng-zorro-antd/upload';

import { NzResizableModule } from 'ng-zorro-antd/resizable';

@NgModule({

  exports: [

    NzAffixModule,

    NzAlertModule,

    NzAnchorModule,

    NzAutocompleteModule,

    NzAvatarModule,

    NzBackTopModule,

    NzBadgeModule,

    NzButtonModule,

    NzBreadCrumbModule,

    NzCalendarModule,

    NzCardModule,

    NzCarouselModule,

    NzCascaderModule,

    NzCheckboxModule,

    NzCollapseModule,

    NzCommentModule,

    NzDatePickerModule,

    NzDescriptionsModule,

    NzDividerModule,

    NzDrawerModule,

    NzDropDownModule,

    NzEmptyModule,

    NzFormModule,

    NzGridModule,

    NzI18nModule,

    NzIconModule,

    NzInputModule,

    NzInputNumberModule,

    NzLayoutModule,

    NzListModule,

    NzMentionModule,

    NzMenuModule,

    NzMessageModule,

    NzModalModule,

    NzNoAnimationModule,

    NzNotificationModule,

    NzPageHeaderModule,

    NzPaginationModule,

    NzPopconfirmModule,

    NzPopoverModule,

    NzProgressModule,

    NzRadioModule,

    NzRateModule,

    NzResultModule,

    NzSelectModule,

    NzSkeletonModule,

    NzSliderModule,

    NzSpinModule,

    NzStatisticModule,

    NzStepsModule,

    NzSwitchModule,

    NzTableModule,

    NzTabsModule,

    NzTagModule,

    NzTimePickerModule,

    NzTimelineModule,

    NzToolTipModule,

    NzTransButtonModule,

    NzTransferModule,

    NzTreeModule,

    NzTreeSelectModule,

    NzTypographyModule,

    NzUploadModule,

    NzWaveModule,

    NzResizableModule

  ]

})

export class DemoNgZorroAntdModule {

}



app.component.html



Please fork this stackblitz to reproduce your issue.<br><br>请 <strong style="color:red;">Fork</strong> 这个链接来重现你碰到的问题。

<br><br>

<button nz-button nzType="primary"><i nz-icon nzType="trophy"></i>  NG-ZORRO-ANTD Playgroud</button>

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容