搭建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.mzph.cn/news/167093.shtml

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

相关文章

怎么去掉视频水印?分享三种视频去水印技巧,轻松搞定!

怎么去掉视频水印?在分享视频时,我们常常会遇到因为水印而影响观感的问题,因此,掌握有效的去水印方法显得尤为重要,随着技术的进步,现在有多种方法可以帮助我们去除视频中的水印。 接下来分享三种简单且有效…

ARKit增加一个盒子

ARKit增加一个盒子 体验一下ARKit的能力,在室内随便加点小球,然后在AR中显示出来。 效果如下图: 以下为操作流程。 新建项目 新建一个空项目,项目一定要选择 Augmented Reality App,能够省很多的事。 之后的 conte…

JAVA线程池原理详解

线程池的优点 1、线程是稀缺资源,使用线程池可以减少创建和销毁线程的次数,每个工作线程都可以重复使用。 2、可以根据系统的承受能力,调整线程池中工作线程的数量,防止因为消耗过多内存导致服务器崩溃。 线程池的创建 public…

这个视频监控技术,让你的工作效率提升10倍!

在当今数字时代,视频监控技术正迅速成为社会安全、商业管理和生产运营的重要支柱。随着科技的飞速发展,视频监控不再仅仅是观察和记录,而是演变成了一种智能、高效的解决方案。 在这个数字化的时代,视频监控不仅是一种技术&#x…

Flink-简介与基础

Flink-简介与基础 一、Flink起源二、Flink数据处理模式1.批处理2.流处理3.Flink流批一体处理 三、Flink架构1.Flink集群2.Flink Program3.JobManager4.TaskManager 四、Flink应用程序五、Flink高级特性1.时间流(Time)和窗口(Window&#xff0…

穿山甲SDK接入收益·android广告接入·app变现·广告千展收益·eCPM收益(2023.11)

接入穿山甲SDK的app 全屏文字滚动APP 数独训练APP 广告接入示例: Android 个人开发者如何接入广告SDK,实现app流量变现 接入穿山甲SDK app示例: android 数独小游戏 经典数独休闲益智 2023.11.11 ~ 2023.11.22 app接入上架有一段时间了,接…

移动应用程序管理的内容、原因和方式

移动应用程序管理(MAM)是一个术语,指的是管理应用程序的整个生命周期,包括从设备安装、更新和卸载应用程序,除了在整个生命周期内管理设备外,MAM 还包括保护应用访问的数据,以及在设备上发现恶意…

17 redis集群方案

1、RedisCluster分布式集群解决方案 为了解决单机内存,并发等瓶颈,可使用此方案解决问题. Redis-cluster是一种服务器Sharding技术,Redis3.0以后版本正式提供支持。 这里的集群是指多主多从,不是一主多从。 2、redis集群的目标…

pair和typedef

文章目录 一、pair用法1.2、pair的创建和初始化1.3、pair对象的操作1.4、(make_pair)生成新的pair对象1.5、通过tie获取pair元素值 2、typedef2.1、什么是typedef2.2、typedef用法2.2.1、对于数据类型使用例如:2.2.2、对于指针的使用例如2.2.3、对于结构体的使用 2.…

java springboot测试类虚拟MVC环境 匹配返回值与预期内容是否相同 (JSON数据格式) 版

上文java springboot测试类鉴定虚拟MVC请求 返回内容与预期值是否相同我们讲了测试类中 虚拟MVC发送请求 匹配返回内容是否与预期值相同 但是 让我意外的是 既然没人骂我 因为我们实际开发 返回的基本都是json数据 字符串的接口场景是少数的 我们在java文件目录下创建一个 dom…

2023年10月纸巾市场分析(京东天猫淘宝平台纸巾品类数据采集)

双十一大促期间,刚需品的纸巾是必囤商品之一。今年双十一,京东数据显示,10月23日至29日,清洁纸品成交额同比增长40%,由此也拉动了10月纸巾市场的销售。 鲸参谋数据显示,今年10月,京东平台纸巾市…

【日常总结】如何禁止浏览器 http自动跳转成https

一、场景 二、问题 三、解决方案 3.1 chrome 浏览器 3.2 edge 浏览器: 3.3 Safari 浏览器 3.4 Firefox 浏览器 3.5 Microsoft Edge 一、场景 公司网站 http:// 谷歌浏览器中自动转换成 https:// 导致无法访问 二、问题 nginx配置ssl 443接口, ht…

SOLIDWORKS 2024新功能之Electrical篇

SOLIDWORKS 2024 Electrical篇目录概览 • 对齐零部件 • 更改多个导轨和线槽的长度 • 过滤辅助和附件零件 • 2D 机柜中的自动零件序号 • 移除制造商零件数据 • 重置未定义的宏变量 • 使用范围缩短列表 • SOLIDWORKS Electrical Schematic 增强功能 1、对齐零部件…

ONNX实践系列-修改yolov5-seg的proto分支输出shape

一、目标 本文主要介绍要将原始yolov5分割的输出掩膜从[b,c,h,.w]修改为[b, h, w, c] 原来的: 目标的: 代码如下: Descripttion: version: @Company: WT-XM Author: yang jinyi Date: 2023-09-08 11:26:28 LastEditors: yang jinyi LastEditTime: 2023-09-08 11:48:01 …

Threejs_14 制作圣诞贺卡

继续跟着老陈打码学习!!!支持!!! 效果图 链接:https://pan.baidu.com/s/1Ft8U2HTeqmpyAeesL31iUg 提取码:6666 使用到的 模型文件和资源等都为老陈打码提供!&#x…

【腾讯云云上实验室】探索保护数据之盾背后的安全监控机制

当今数字化时代,数据安全成为了企业和个人最为关注的重要议题之一。随着数据规模的不断增长和数据应用的广泛普及,如何保护数据的安全性和隐私性成为了迫切的需求。 今天,我将带领大家一起探索腾讯云云上实验室所推出的向量数据库&#xff0c…

新版PY系列离线烧录器,支持PY002A/002B/003/030/071等MCU各封装,不同 FLASH 大小型号

PY系列离线烧录器,目前支持PY32F002A/002B/002/003/030/071/072/040/403/303 各封装、不同 FLASH 大小型号。PY离线烧录器需要搭配上位机软件使用,上位机软件可以在芯岭技术官网上下载,还包括了离线烧录器的使用说明。PY离线烧录器使用MINI U…

金融机构如何高效率考勤?这个技巧帮了大忙!

在现代社会,随着科技的不断发展,人脸识别技术作为一种高效、便捷的身份验证手段,逐渐应用于各个领域,其中之一便是人脸考勤系统。 传统的考勤方式存在一系列问题,如卡片打卡容易被冒用、签到表容易造假等,而…

CTFUB-web前置技能-HTTP协议

burp抓包,抓第二次的 修改请求方式为CTFHUB

算法笔记:OPTICS 聚类

1 基本介绍 OPTICS(Ordering points to identify the clustering structure)是一基于密度的聚类算法 OPTICS算法是DBSCAN的改进版本 在DBCSAN算法中需要输入两个参数: ϵ 和 MinPts ,选择不同的参数会导致最终聚类的结果千差万别,因此DBCSAN…