在Angular项目中引入NG-ZORRO

news/2024/4/23 14:44:18/文章来源:https://blog.csdn.net/xiayngbaidu12345/article/details/129232563

在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>

运行可以在浏览器上看到一个按钮:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_74523.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能算法实现PID智能车控制系统

智能算法实现PID智能车控制系统可在微信公众号 *高级嵌入式软件* 里回复 *智能算法* 查看完整版文章摘要关键词第一章绪论1.1智能车概述1.2智能PID研究现状1.3本文工作第二章 PID控制简介第三章 内模PID简介3.1 内模PID控制第四章内模智能PID智能车控制系统设计4.1 系统设计4.2…

《MySQL学习》 表中随机取记录的方式

一.初始化测试表 创建表 words CREATE TABLE words ( id int(11) NOT NULL AUTO_INCREMENT, word varchar(64) DEFAULT NULL, PRIMARY KEY (id)) ENGINEInnoDB;插入测试数据 create procedure idata()begin declare i int; set i 0; while i<10000 do insert into words…

第二节类型转换、运算符

类型转换 自动类型转换&#xff1a; 类型小的变量可以赋值给大的类型变量。 表达式的自动类型转换&#xff1a; byte short char在表达式中是当做 int计算的。 强制类型转换&#xff1a; 大类型的变量转化为小类型的变量。 注&#xff1a;浮点型转换为整数是直接丢掉小数部…

尚硅谷nginx基础

nginx1. nginx安装1.1版本区别1.2安装步骤1.3 启动nginx1.4关于防火墙1.5 安装成系统服务1.6 配置nginx环境变量2. nginx基本使用2.1 基本运行原理2.2 nginx配置文件2.2.1 最小配置2.2.1.1 基本配置说明2.3 虚拟主机2.3.1域名、dns、ip地址的关系2.3.2IP地址和DNS地址的区别2.3…

学渣适用版——Transformer理论和代码以及注意力机制attention的学习

参考一篇玩具级别不错的代码和案例 自注意力机制 注意力机制是为了transform打基础。 参考这个自注意力机制的讲解流程很详细&#xff0c; 但是学渣一般不知道 key&#xff0c;query&#xff0c;value是啥。 结合B站和GPT理解 注意力机制是一种常见的神经网络结构&#xff0…

Android安卓中jni封装代码打包为aar

前文【Android安卓中jni与Java之间传递复杂的自定义数据结构】已经介绍jni编译c++代码且已经成功封装成java,但是c++是以源代码形式继承在app中,本文介绍如何将前述jni c++代码以隐藏源代码封装成aar的形式。 1、aar打包 1.1、新建module 按照流程 File -> New Module …

windows服务器实用(4)——使用IIS部署网站

windows服务器实用——IIS部署网站 如果把windows服务器作为web服务器使用&#xff0c;那么在这个服务器上部署网站是必须要做的事。在windows服务器上&#xff0c;我们一般使用IIS部署。 假设此时前端给你一个已经完成的网站让你部署在服务器上&#xff0c;别人可以在浏览器…

Objective-C description 自定义对象的打印格式/输出的字符串 类似于Java 中的 toString 方法

总目录 iOS开发笔记目录 从一无所知到入门 文章目录IntroNSObject 源码测试类截图测试代码输出Intro 在 Java 中&#xff0c;对于自定义类一般会重写集成自Object类的toString方法&#xff0c;这样在打印该类的对象时&#xff0c;打印出的字符串就是我们在 toString() 方法中返…

Oracle Apex 21.2 安装过程

什么是 Oracle APEX&#xff1f; Oracle APEX 是广受欢迎的企业级低代码应用平台。借助该平台&#xff0c;您可以构建功能先进的可扩展安全企业应用&#xff0c;并在任何位置&#xff08;云或内部部署&#xff09;部署这些应用。 使用 APEX&#xff0c;开发人员可快速开发并部…

数据结构入门DAY1

力扣刷题合集&#xff1a;力扣刷题_Sunlightʊə的博客-CSDN博客217.存在重复元素相关题目链接&#xff1a;力扣 - 存在重复元素题目重现给你一个整数数组 nums 。如果任一值在数组中出现 至少两次 &#xff0c;返回 true &#xff1b;如果数组中每个元素互不相同&#xff0c;返…

大数据框架之Hadoop:MapReduce(三)MapReduce框架原理——ReduceTask工作机制

1、ReduceTask工作机制 ReduceTask工作机制&#xff0c;如下图所示。 &#xff08;1&#xff09;Copy阶段&#xff1a;ReduceTask从各个MapTask上远程拷贝一片数据&#xff0c;并针对某一片数据&#xff0c;如果其大小超过一定阈值&#xff0c;则写到磁盘上&#xff0c;否则直…

Active Directory 05 - 初识 AD CS 证书服务

写在最前 如果你是信息安全爱好者&#xff0c;如果你想考一些证书来提升自己的能力&#xff0c;那么欢迎大家来我的 Discord 频道 Northern Bay。邀请链接在这里&#xff1a; https://discord.gg/9XvvuFq9Wb我会提供备考过程中尽可能多的帮助&#xff0c;并分享学习和实践过程…

1029 旧键盘 C++中find函数的使用

题目链接&#xff1a; 一、自己的想法&#xff1a;&#xff08;弱化版双指针&#xff09; 思路为用两个“指针”i, j分别指向原来字符串和实际输入字符串的第一个字符&#xff0c;然后判断i&#xff0c;j所指字符是否一致&#xff0c;若是则i, j同时&#xff0c;若否则将i所指…

【5G RRC】5G系统消息SIB3介绍

博主未授权任何人或组织机构转载博主任何原创文章&#xff0c;感谢各位对原创的支持&#xff01; 博主链接 本人就职于国际知名终端厂商&#xff0c;负责modem芯片研发。 在5G早期负责终端数据业务层、核心网相关的开发工作&#xff0c;目前牵头6G算力网络技术标准研究。 博客…

Windows下命令执行绕过技巧总结(渗透测试专用)

一、连接符1、双引号不要求双引号闭合举例&#xff1a;"who"a"mi" //闭合的 "who"a"mi //不闭合的2、圆括号必须在两边&#xff0c;不能包括中间的字符。举例&#xff1a;((whoami))3、^符号&#xff08;转译符号&#xff09;不可以在结尾&…

Go项目(商品微服务-1)

文章目录简介建表protohandler商品小结简介 商品微服务主要在于表的设计&#xff0c;建哪些表&#xff1f;表之间的关系是怎样的&#xff1f; 主要代码就是 CURD表和字段的设计是一个比较有挑战性的工作&#xff0c;比较难说清楚&#xff0c;也需要经验的积累&#xff0c;这里…

【机器学习笔记】Python基础笔记

目录基础语法加载数据&#xff1a;pd.read_csv查看数据大小&#xff1a;shape浏览数据行字段&#xff1a;columns浏览少量数据&#xff1a;head()浏览数据概要&#xff1a;describe()输出&#xff1a;to_csv基础功能语法缺省值去除缺失值&#xff1a;dropna按行删除&#xff1a…

Paddle配置

目录&#xff1a; 1.激活环境 2.版本选择 突发情况&#xff1a;ModuleNotFoundError: No module named paddle 检验是否安装成功 1.激活环境 Anaconda&#xff1a; conda remove -n paddle --all conda activate paddle 2.版本选择 打开链接&#xff1a;https://www.pa…

基于企业微信应用消息的每日早安推送

基于企业微信应用消息的每日早安推送 第一步&#xff1a;注册企业微信 企业微信注册地址&#xff1a;https://work.weixin.qq.com/wework_admin/register_wx 按照正常流程填写信息即可&#xff0c;个人也可以注册企业微信&#xff0c;不需要公司 注册完成后&#xff0c;登录…

Google Guice 4:Bindings(2)

4 Scopes (实例的作用域&#xff09; 4.1 默认规则&#xff1a;unreuse instance 到目前为止&#xff0c;通过bind().to()和Provides定义的binding&#xff0c;每次需要注入实例对象时&#xff0c;Guice都会创建一个新的实例 // 修改DatabaseTransactionLog&#xff0c;使其打…