当前位置: 首页 > 编程笔记 >

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

骆英纵
2023-03-14
本文向大家介绍关于angular引入ng-zorro的问题浅析,包括了关于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问题内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍浅谈ng-zorro使用心得,包括了浅谈ng-zorro使用心得的使用技巧和注意事项,需要的朋友参考一下 前言 本周使用ng-zorro做了项目的原型,对它也有了一定的了解,总的来说不难,可以用强化版boostrap来理解它,由于黄庭祥初始化工作做得很好,在写的过程遇到的问题不是很麻烦,感谢祥哥。 问题一、button不起作用 问题描述:button按钮按下无响应,如下图: 代码如下

  • ng-zorro-antd 是 Ant Design 的 Angular 实现,主要用于研发企业级中后台产品。全部代码开源并遵循 MIT 协议,任何企业、组织及个人均可免费使用。 ✨ 特性 提炼自企业级中后台产品的交互语言和视觉风格。 开箱即用的高质量 Angular 组件,与 Angular 保持同步升级。 使用 TypeScript 构建,提供完整的类型定义文件。 支持 OnPush 模式,性

  • 本文向大家介绍关于Angular.js和Angular的问题相关面试题,主要包含被问及关于Angular.js和Angular的问题时的应答技巧和注意事项,需要的朋友参考一下 haizlin,你好,我想提一个建议。由于Angular和Angular.js是2个不同的框架,我建议要么将该Issue改为Angular面试题模版,要么新建一个Angular面试题模版。

  • NG-ZORRO An enterprise-class Angular UI component library based on Ant Design. English | 简体中文 ✨ Features An enterprise-class UI design system for Angular applications. 60+ high-quality Angular compone

  • Ant Design Mobile of Angular(NG-ZORRO-MOBILE)是 Ant Design 移动规范的 Angular 实现,服务于阿里巴巴集团数据无线业务。 特性 开箱即用的高质量 Angular 无线端组件 UI 样式高度可配置,拓展性更强,轻松适应各类产品风格 使用 TypeScript 开发,提供类型定义文件,支持类型及属性智能提示,方便业务开发 提供 "组件按需加

  • NG-ZORRO-Mobile This is the Angular implementation of Ant Design Mobile specification, serving Alibaba big data wireless service. 中文 README Scan QR Code Features An enterprise-class UI design language