搭建Angular并引入NG-ZORRO组件库

作者:baekpcyyy🐟

1.安装node.js

注:安装 16.0 或更高版本的 Node.js
node官网:https://nodejs.org/en
在这里插入图片描述
在这里插入图片描述

2.进入angular官网

https://angular.cn/guide/setup-local
新建一个文件夹 vsc打开 打开终端

1.首先安装angular手脚架

请添加图片描述

2.然后执行命令创建工作区

请添加图片描述
请添加图片描述
等待这个instant完成 这时我们就等于创建了一个angular项目现在我们给这个项目加上NG-ZORRO组件库

3.首先进入NG-ZORRO官网

https://ng.ant.design/docs/i18n/zh

执行这个命令之前我们进入创建项目的文件夹下
请添加图片描述
然后执行此命令安装组件库

请添加图片描述
choose template to create project:blank
创建一个空的页面 第二个选项创建的是有侧边栏的选项
请添加图片描述
等待下载完成后我们启动这个项目
请添加图片描述
请添加图片描述
复制链接进入浏览器生成这样的页面说明组件库初始化配置成功
请添加图片描述
然后我们开始安装组件执行如下代码
请添加图片描述
请添加图片描述
此时我们已经将组件库引入
然后我们在angular.json引入相关的样式文件
请添加图片描述
请添加图片描述
接下来我们继续引入相关文件
请添加图片描述
请添加图片描述
#4.通过命令行创建组件
ng g c 组件名
请添加图片描述
然后我们删除里面初始的内容在app.component.html将新建的组件引入
请添加图片描述
在app.component.ts将组件倒入
在这里插入图片描述
现在我们启动项目就可以看见自己通过命令行创建的组件已经在页面渲染
请添加图片描述
现在我们在这个组件内引入组件库的button进行尝试
将我圈出来的分别写到对应的模块
请添加图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
下面是页面渲染出来的结果
请添加图片描述

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

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

相关文章

高级/进阶”算法和数据结构书籍推荐

“高级/进阶”算法和数据结构书籍推荐《高级算法和数据结构》 高级算法和数据结构 为什么要选择本书 谈及为什么需要花时间学算法,我至少可以列举出三个很好的理由。 (1)性能:选择正确的算法可以显著提升应用程序的速度。仅就搜索来说,用二…

Python基础语法之学习input()函数

Python基础语法之学习input函数 前言一、代码二、效果 前言 一、代码 # 默认是字符串类型 number input("请输入一个数字:") print("输入的数字是",number)二、效果 没有人可以阻止你成为自己想成为的人,只有你自己才能放弃梦想。…

WinMerge使用教程,WinMerge下载

一、下载 官方下载 WinMerge - You will see the difference… 官方地址:https://winmerge.org/ 阿里云盘下载 文件内容对比工具WinMerge2.16.25.25 https://www.alipan.com/s/r7MzudB235x 点击链接保存,或者复制本段内容,打开「阿里云盘…

机器视觉:塑造未来的智能视界

🎥 屿小夏 : 个人主页 🔥个人专栏 : IT杂谈 🌄 莫道桑榆晚,为霞尚满天! 文章目录 📑 前言🌤️ 机器视觉技术的实现☁️ 图像采集☁️ 图像处理☁️ 数据建模☁️应用展示…

94.STM32外部中断

目录 1.什么是 NVIC? 2.NVIC寄存器 3.中断优先级 4.NVIC的配置 设置中断分组​编辑 配置某一个中断的优先级 5.什么是EXTI 6.EXTI和NVIC之间的关系 7.SYSCFG 的介绍 1.什么是 NVIC? NVIC是一种中断控制器,主要用于处理 ARM Cort…

java--子类中访问其他成员的特点

1.在子类方法中访问其他成员(成员变量、成员方法),是依照就近原则的。 ①先子类局部范围找。 ②然后子类成员范围找。 ③然后父类成员范围找,如果父类范围还没有找到则报错。 2.如果父类中,出现了重名的成员,会优先使用子类的…

NV040C语音芯片:让自助ATM机使用更加安全快捷

近年来,移动支付方式的兴起、银行加强线上化服务、数字人民币项目推进等因素的影响,人们使用ATM机的频率呈现小幅度的下降趋势。然而,自助ATM机并未从我们的视野中消失,它们仍然在金融领域发挥着重要的作用。未来,ATM机…

Rust内存布局

题图忘了来自哪里.. 整型,浮点型,struct,vec!,enum 本文是对 Rust内存布局 的学习与记录 struct A { a: i64, b: u64,}struct B { a: i32, b: u64,}struct C { a: i64, b: u64, c: i32,}struct D { a: i32, b: u64, c: i32, d: u64,}fn main(…

关于网站的favicon.ico图标的设置需要注意的几点

01-必须在网页的head标签中放上下面的说明&#xff1a; <link rel"shortcut icon" href"/favicon.ico">否则&#xff0c;浏览器虽然能读到图标&#xff0c;但是不会把图标显示在标签上。 02-浏览器会默认到网站根目录中读取文件favicon.ico&#x…

学习笔记-瑞吉外卖项目实战(一)

软件开发整体介绍 软件开发流程 角色分工 软件环境 瑞吉外卖项目介绍 项目介绍 产品原型介绍 技术选型 功能架构 角色 开发环境搭建 数据 创建database reggie&#xff0c;在里面创建表&#xff1a; maven 创建springboot项目并导入相关依赖坐标&#xff1a; 我们可以在项目…

webGL网页游戏的开发步骤

开发基于 WebGL 的网页游戏涉及多个步骤&#xff0c;包括游戏概念的设计、图形资源的创建、编码和调试等。以下是一个一般性的步骤指南&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 确定游戏概念&a…

【办公软件】XML格式文件怎么转Excel表格文件?

首先我们有一个XML格式的文件&#xff0c;例如&#xff1a; 其中的数据是这样的&#xff1a; 我们现在在路径中选中这个XML格式的文件&#xff0c;然后鼠标右键&#xff0c;选择用WPS表格打开后&#xff0c;可见XML格式的文件已经自动转换成了Excel表啦。。。。

CH02_交给子类

Template Method模式 组成模板的方法被定义在父类中&#xff0c;由于这些方法是抽象方法&#xff0c;所以只查看父类的代码是无法知道这些方法最终会进行何种具体处理的。唯一能知道的就是父类如何调用这些方法。 类图 说明 AbstractClass&#xff08;抽象类&#xff09; Abs…

JAVAEE初阶 多线程基础(四)

join的知识补充,线程的状态和线程安全 一.多线程完成运算操作二.多线程代码的变换2.1 转换成串行执行 三.join的参数四.获取线程的引用4.1用this方法获取实例4.2 用currentThread获取实例 五.线程的状态六.线程安全 一.多线程完成运算操作 可以发现,多线程并行比单线程的速度快…

Java核心知识点整理大全19-笔记

目录 14.1.5.2. MemStore 刷盘 全局内存控制 MemStore 达到上限 RegionServer 的 Hlog 数量达到上限 手工触发 关闭 RegionServer 触发 Region 使用 HLOG 恢复完数据后触发 14.1.6.HBase vs Cassandra 15. MongoDB 15.1.1. 概念 15.1.2. 特点 16. Cassandra 16.1.1…

MySQL-02-InnoDB存储引擎

实际的业务系统开发中&#xff0c;使用MySQL数据库&#xff0c;我们使用最多的当然是支持事务并发的InnoDB存储引擎的这种表结构&#xff0c;下面我们介绍下InnoDB存储引擎相关的知识点。 1-Innodb体系架构 InnoDB存储引擎有多个内存块&#xff0c;可以认为这些内存块组成了一…

1146:吃糖果(C语言)

题目描述 HOHO&#xff0c;终于从Speakless手上赢走了所有的糖果&#xff0c;是Gardon吃糖果时有个特殊的癖好&#xff0c;就是不喜欢连续两次吃一样的糖果&#xff0c;喜欢先吃一颗A种类的糖果&#xff0c;下一次换一种口味&#xff0c;吃一颗B种类的糖果&#xff0c;这样&…

GPT还远远不是真正的智能

GPT是一个基于深度学习的自然语言处理模型&#xff0c;它可以生成逼真的文本。虽然GPT在生成文本方面取得了显著的进展&#xff0c;但它并不具备真正的智能。GPT是通过训练模型来学习语言模式&#xff0c;它不具备理解、推理、判断和主动学习的能力。它只是根据已有的语料库生成…

Go 中切片(Slice)的长度与容量

切片长度与容量在 Go 中很常见。切片长度是切片中可用元素的数量&#xff0c;而切片容量是从切片中第一个元素开始计算的底层数组中的元素数量。 Go 中的开发者经常混淆切片长度和容量&#xff0c;或者对它们不够了解。理解这两个概念对于高效处理切片的核心操作&#xff0c;比…

天鹅湖国家旅游度假区 | 展柜OLED透明屏:创新展示提升互动体验

天鹅湖国家旅游度假区 | 展柜OLED透明屏 产品&#xff1a;一块55寸OLED透明屏嵌入玻璃安装 应用场景&#xff1a;用在天鹅湖国家旅游度假区——三门峡城市文化客厅展馆中的一个透明展示柜&#xff0c;用一块55寸OLED透明屏嵌入展示柜的玻璃&#xff0c;让观众即可以看到展柜里…
最新文章