在Angular项目中引入NG-ZORRO

news2024/11/24 7:50:02

在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.coloradmin.cn/o/374027.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

微信小程序、小游戏的流量主一般可以赚多少钱?

本篇文章主要科普小程序、小游戏流量主一般赚钱的实际情况&#xff0c;通过在下长期运营的经验汇总而成。 日期&#xff1a;2023年2月26日 作者&#xff1a;任聪聪 小程序、小程序满1000用户后即可开通流量主&#xff0c;但实际上很多人并没有传说中的那种日赚几千的流量收入的…

学习笔记之Vuex(五)

Vuex&#xff08;五&#xff09;Vuex一、什么是Vuex二、Vuex工作原理三、搭建Vuex环境四、求和案例分析4.1 求和案例——vue实现4.2 求和案例——vuex实现&#xff08;五&#xff09;Vuex 一、什么是Vuex 1.概念 在Vue中实现集中式状态&#xff08;数据&#xff09;管理的一…

第二节类型转换、运算符

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

nacos config

https://github.com/alibaba/spring-cloud-alibaba/wiki/Nacos-config 必须在 bootstrap.properties 配置 nacos server 的地址 data id : 对应一个微服务 namespace : 对应环境 dev prod 默认 public group : 对应一个项目&#xff0c;&#xff0c;默认 DEFUALT_GROUP 当你…

神经网络 线性回归从0开始实现的代码分析 --跟李沐学AI

3.2. 线性回归的从零开始实现 — 动手学深度学习 2.0.0 documentation 分析了好几天才懂,个人水平有限 如果有错请指出 1.导包 %matplotlib inline import random import torch from d2l import torch as d2ldef synthetic_data(w, b, num_examples): #save""&quo…

spring integration使用:消息转换器

系列文章目录 …TODO spring integration开篇&#xff1a;说明 …TODO spring integration使用&#xff1a;消息路由 spring integration使用&#xff1a;消息转换器 spring integration使用&#xff1a;消息转换器系列文章目录前言消息转换器&#xff08;或者叫翻译器&#x…

SQLserver 语句查询当前数据库版本型号

SQL执行语句select serverproperty(productversion) as 产品版本号,serverproperty(productlevel) as 产品层次,serverproperty(edition) as 版本SQL执行历史记录&#xff1a;select version as 版本号select serverproperty(productversion) as 产品版本号,serverproperty(pro…

【Redis】一文搞懂 Redis 中的缓存穿透、缓存击穿、缓存雪崩及其解决方案

一文搞懂 Redis 中的缓存穿透、缓存击穿、缓存雪崩及其解决方案1. 缓存穿透1.1 什么是缓存穿透1.2 缓存穿透的解决方案1.2.1 缓存空对象1.2.2 布隆过滤器布隆过滤器工作原理Redis 使用布隆过滤器2. 缓存击穿1.1 什么是缓存击穿1.2 缓存击穿的解决方案1.2.1 设置热点数据永不过期…

【无限思维画布】制作思维导图第三步,节点移动与编辑

正在为无限词典制作单词思维导图功能&#xff0c;实现无限单词导图&#xff0c;无限思维画布。目前制作到第三步&#xff0c;实现节点移动与编辑&#xff1a; 节点移动与编辑Details 第一步&#xff0c;搜索 github。 一个是比较完善的&#xff0c;基于普通dom&#xff0c;用…

Random(二)什么是伪共享?@sun.misc.Contended注解

目录1.背景简介2.伪共享问题3.问题解决4.JDK使用示例1.背景简介 我们知道&#xff0c;CPU 是不能直接访问内存的&#xff0c;数据都是从高速缓存中加载到寄存器的&#xff0c;高速缓存又有 L1&#xff0c;L2&#xff0c;L3 等层级。在这里&#xff0c;我们先简化这些复杂的层级…

对象创建的过程

对象创建的过程 在语言层面上&#xff0c;创建对象通常仅仅是一个new关键字而已&#xff08;例外&#xff1a;复制、反序列化&#xff09;&#xff1b; 而在虚拟机中&#xff0c;对象的创建又是怎样一个过程呢&#xff1f;&#xff08;文中讨论的对象限于普通Java对象&#xff…

Jetpack Compose 深入探索系列一:Composable 函数

Composable 函数的含义 如果我们只专注于简单的语法&#xff0c;任何标准的Kotlin函数都可以成为一个可组合函数&#xff0c;只需将其注解为Composable: 通过这样做&#xff0c;我们实际上是在告诉编译器&#xff0c;该函数打算将一些数据转换为一个Node节点&#xff0c;以便注…

Simulink建模:如何学习Simulink建模

本文介绍博主自己学习Simulink建模的方法。后续博客都会按照本文中的思路来记录博主学习的过程。 文章目录1 Simulink建模的分类1.1 连续模型建模1.2 物理模型建模1.3 控制算法建模2 控制算法建模的基本知识2.1 控制算法与电控软件架构2.2 控制算法与周期调度2.3 控制算法与其他…

分布式-分布式缓存笔记

分布式系统缓存 缓存分类 前端缓存 前端缓存包括页面和浏览器缓存&#xff0c;如果是 App&#xff0c;那么在 App 端也会有缓存。当你打开商品详情页&#xff0c;除了首次打开以外&#xff0c;后面重复刷新时&#xff0c;页面上加载的信息来自多种缓存。 页面缓存属于客户端…

61 - 进程互斥锁的详细设计

---- 整理自狄泰软件唐佐林老师课程 文章目录1. 问题1.1 生活中的示例1.1.1 吃饭问题1.1.2 十字路口1.1.3 洗手间1.1.4 生产消费者问题1.2 结论2. 接下来的问题2.1 临界资源&#xff08;Critical Resource&#xff09;2.2 临界区&#xff08;Critical Section&#xff09;2.3 任…

【C3】cpu_wtd_sysfs

文章目录2.cpu_wtd_sysfs&#xff1a;switchboard.c &#xff08;fpga下i2c访问Switch CPLD1&#xff0c;Switch CPLD2 &#xff1a;CPLD, FPGA , QSFP&#xff09;scriptbmc_wtd&#xff1a;syscpld.c中wd_en和wd_kick节点对应寄存器&#xff0c;crontab&#xff0c;FUNCNAMEA…

Spring事务的隔离级别

事务的特性: 隔离性:多个事务在并发执行的时候&#xff0c;多个事务执行的一个行为模式&#xff0c;当一个事务执行的时候&#xff0c;另一个事务执行的一个行为模式是什么&#xff1f; 1)A&#xff0c;原子性&#xff0c;一个事务中的所有操作&#xff0c;要么全部执行成功&am…

I2C误码了怎么处理

我相信不少人有遇到I2C设备识别不到&#xff0c;或者概率性误码。 我相信大部分工程师的做法如下&#xff1a; 1.调整上拉电阻的大小&#xff0c;然后重新老化测试&#xff1b; 2.降低I2C速率&#xff0c;然后老化测试&#xff1b; 3.软件加入一定判断条件&#xff0c;将能…

Ncvicat 打开sql文件方法

Nacicat打开sql文件时&#xff0c;有比较多的文章介绍可以直接打开&#xff0c;方法介绍的比较多&#xff0c;但是我遇到了一个坑&#xff0c;就是如何配置环境都无法打开。 本机环境&#xff1a; windows10 mysql 5.7.40 Navicat12.1 一、遇到问题情况 1.1、通过navicat…

Kubernetes向集群外部暴露服务的方式你知道吗?

Kubernetes向进群外暴露服务的方式有三种&#xff1a;Ingress、LoadBlancer类型的Service、NodePort类型的Service。IngressIngress相当于service的service&#xff0c;可以将外部请求通过按照不同规则转发到对应的service。实际上&#xff0c;ingress相当于一个7层的负载均衡器…