关于angular引入ng-zorro的问题浅析

ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法，下面记录其提供的第二种自行构建的方式。

第一步：执行该命令创建新的angular项目，若没安装angular/cli请执行安装

ng new new-project

第二步：添加ng-zorro

npm install ng-zorro-antd --save

第三步：引入模块

在app.module.ts文件中引入

import { NgZorroAntdModule } from 'ng-zorro-antd';

......
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
/** 导入 ng-zorro-antd 模块 **/
NgZorroAntdModule
]
......

第四步：在 angular.json 文件中引入样式

{
"assets": [
...
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
] }

第五步：在入口style.css或者style.less文件下引入组件样式

@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

或

@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */

然后在所需要的组件中使用ng-zorro就可正常使用了。

总结

到此这篇关于关于angular引入ng-zorro的问题的文章就介绍到这了,更多相关angular引入ng-zorr问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Angular中使用ng-zorro图标库部分图标不能正常显示问题

    在ng-alain中,使用ng-zorro图标库,发现部分能正常显示,部分并不能显示,在控制台同时发现出错报错. ERROR Error: [@ant-design/icons-angular]: the icon redo-o does not exist or is not registered. at IconNotFoundError (ant-design-icons-angular.js:159) at MapSubscriber.project (ant-design-icons-

  • 详解关于Angular4 ng-zorro使用过程中遇到的问题

    写在前面 由于现在网络上Angular 4的相关技术文档不是很充分,我写出这个采坑的记录文档,一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来,另一方面也想着某些坑大家可能也会遇到,也可以给道友做一个参考.文档中的很多地方多有不足,后期我会慢慢完善,也希望道友们能够及时指出文档中不正确的与可以优化的地方. 我计划将该帮助文档分为4个章节: 章节一: 关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤 章节二: angular 4 引入路由=> 组件模

  • 关于angular引入ng-zorro的问题浅析

    ng-zorro的官网上提供了两种在项目中添加ng-zorro的方法,下面记录其提供的第二种自行构建的方式. 第一步:执行该命令创建新的angular项目,若没安装angular/cli请执行安装 ng new new-project 第二步:添加ng-zorro npm install ng-zorro-antd --save 第三步:引入模块 在app.module.ts文件中引入 import { NgZorroAntdModule } from 'ng-zorro-antd'; ....

  • Angular CLI发布路径的配置项浅析

    前言 项目发布总需要根据具体情况配置打包,Angular CLI 提供了方便的打包工具 "ng build".其中关于发布路径的配置有几样,这里总结汇总它们. base-href 它指定的是项目构建的目录结构,例如设置为 "deploy-test",最后的打包结果就在 dist/deploy-test 目录下. 项目新建时,在 index.html 下默认是 <base href="/" rel="external nofollo

  • .Net Core+Angular Cli/Angular4开发环境搭建教程

    .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

  • 详解利用Angular实现多团队模块化SPA开发框架

    0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 1.技术选项杂乱,大家各玩各 2.业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 3.业务壁垒,业务之间的互通变得比较麻烦 4.部署方式复杂,多个域名(或IP地址)访问,给用户造成较大的记忆难度 5.多套系统,风格难以统一 6.等等... 当然,解决方式有不少.以下就来讲解下我们这边的一种解决方案. 1.思路 Angualr Angular(注:非AngularJS) 是流行的前端

  • 详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本是 v4.2.3 开始搭建 Angular 开发环境 搭建 Angular 开发环境需要的步骤: Node.js 配置 npm Angular CLI 安装 Node.js 下载安装Node.js,下载最新的 LTS 版本即可,目前最新的版本是 v6.11.0 LTS 配置 npm 安装好 Node

  • Angular CLI 安装和使用教程

    Angular CLI 安装和使用教程

    背景介绍 关于Angular版本,Angular官方已经统一命名Angular 1.x同一为Angular JS:Angular 2.x及以上统称Angular: CLI是Command Line Interface的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli.vue cli等:它可以创建项目.添加文件以及执行一大堆开发任务,比如测试.打包和发布. 安装Angular CLI 1.首先确认安装了node.js和npm // 显示当前node和npm版本 $ node -

  • 详细介绍RxJS在Angular中的应用

    RxJS是一种针对异步数据流编程工具,或者叫响应式扩展编程:可不管如何解释RxJS其目标就是异步编程,Angular引入RxJS为了就是让异步可控.更简单. 而今就是要探讨什么是Observable.observer.operator.Submit.EventEmmit,以及如何去使用它们. 什么是Observable? Observable只是一个普通函数,要想让他有所作为,就需要跟observer一起使用:前者是受后者是攻.而这个observer(后面我们会介绍)只是一个带有 next.er

  • angular+webpack2实战例子

    angular+webpack2实战例子

    之前研究过webpack但是一直没用过,这次公司要做一个h5网站,正好拿来练练手,话说angular1x对移动端不是很友好,但主要是angular1x比较熟悉,上手快,开发也快,就没去考虑其他前端mvc框架. 好了webpack出了中文版以后,对于我们这些英语不是很好的来说真的是太棒了,话说angularjs啥时候也出个中文文档就更好了,webpack官网:https://doc.webpack-china.org/ 右上角可以选择语言. 开始之前先看一下目录文件: 第一步: 首先要使用webp

  • Angular使用ControlValueAccessor创建自定义表单控件

    在 Angular 自定义表单控件,有时你想要的输入不是标准的文本输入.选择或复选框.通过实现ControlValueAccessor 接口并将组件注册为 NG_VALUE_ACCESSOR,您可以将自定义表单控件无缝地集成到模板驱动或响应表单中,就像它是本地表单一样! ControlValueAccessor ControlValueAccessor 是一个接口,充当Angular API 和 DOM 元素之间的桥梁 ControlValueAccessor 是一个连接表单模型和视图(DOM元

  • Angular(5.2->6.1)升级小结

    Angular(5.2->6.1)升级小结

    在前面的文章中也曾经分别提到过,angular6由于存在一些稍大的变化,所以不能像Angular4到Angular5那样基本无感地进行升级,这里结合官方提示,简单整理一下Angular5.2到目前稳定的6.1的升级要点. 事前准备 变更内容 除此之外,还需要确认如下内容: tsconfig.json: preserveWhitespaces设定为off(v6缺省设定) package.json中scripts的使用,所有的cli命令统一使用两个横线–传入参数(POSIX规范) ngModelCh

随机推荐