在Angular项目中引入NG-ZORRO

1.前置
2.安装NG-ZORRO并进行初始化配置
3.引入样式
4.引入组件

1.前置

首先创建一个angular项目：angular创建一个新项目的步骤
这是我项目的结构：

2.安装NG-ZORRO并进行初始化配置

安装NG-ZORRO：cd 到当前项目位置，使用命令

ng add ng-zorro-antd

进行安装，接着会有一些初始化问题，根据自己需要进行选择，我是这样设置的：
设置完后，会提示成功。

3.引入样式

我引入的是全部组件样式，在 angular.json 中引入了

"styles": ["node_modules/ng-zorro-antd/ng-zorro-antd.min.css"]

项目里：

在 style.css 中引入ng-zorro-antd.min.css，官网是说

@import "~ng-zorro-antd/ng-zorro-antd.min.css";

但是在运行时，会报解析不到ng-zorro-antd.min.css的错误，根据错误提示，是在项目的src目录下找的这个文件，但是实际上这个文件下到了node_modules里，所以我改成了下面的：

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.min.css";

4.引入组件

以按钮组件NzButtonModule为例：在app.module.ts中引入NzButtonModule

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';@NgModule({declarations: [AppComponent],imports: [NzButtonModule]
})
export class AppModule { }

之后在模板中使用：

<button nz-button nzType="primary">Primary</button>

运行可以在浏览器上看到一个按钮：

在Angular项目中引入NG-ZORRO相关推荐

angular项目(TS)引入腾讯地图报找不到qq
文章目录在angular项目中引入腾讯地图问题解决结尾在angular项目中引入腾讯地图在index.html文件中script标签加载API服务 <script charset=&q ...
Angular项目中使用echarts中国地图
首先要在Angular项目中安装echarts的依赖: npm install echarts --save npm install ngx-echarts --save 第二.在创建包含地图的Ang ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
在C++项目中引入Lua（AlphaGo使用的方案）
最近大火的AlphaGo,其中的deepmind已经开源,可以到github中下载https://github.com/deepmind/lab·,网上还有一个基于Python开源AlphaGo,那个 ...
引入 javascript_在您JavaScript项目中引入类型安全性？再想一想
引入 javascript by James Wright 詹姆斯·赖特(James Wright) 在您JavaScript项目中引入类型安全性? 再想一想 (Introducing Type Sa ...
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
项目中引入阿里巴巴图标--iconfont图标的使用-svg格式一.下载图标 1.先进入iconfont.cn页面 iconfont官网:https://www.iconfont.cn/ 2.登陆, ...
如何在Vue项目中引入ArcGIS JavaScript API 创建三维可视化地图（含vue项目创建教程）
新手上路之在Vue项目中引入ArcGIS API 视频教程 B站搜索 X北辰北,感谢up主无私的教学~ B站地址:https://www.bilibili.com/video/BV18E411K7B ...
Webpack项目中引入Bootstrap4.x
Bootstrap是一个简洁.直观.强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x. 由于Bootstrap在各个Vue组件中 ...
说说如何在项目中引入 jBPM4 工作流框架以及遇到的坑儿
由于各种原因,我们需要在项目中引入 jBPM4 工作流框架,遇到了不少问题,今记录如下O(∩_∩)O 1 引入步骤 1.1 加入依赖包非 Maven 项目,在 lib 包中加入 jbpm.jar. ...

在Angular项目中引入NG-ZORRO

在Angular项目中引入NG-ZORRO

1.前置

2.安装NG-ZORRO并进行初始化配置

3.引入样式

4.引入组件

在Angular项目中引入NG-ZORRO相关推荐

最新文章

热门文章