搭建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.hqwc.cn/news/214741.html

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

相关文章

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

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

深入理解数据结构:队列的实现及其应用场景

文章目录 🍂前言🍂队列的基本概念和特性🍂队列的实现方式️🌱顺序队列️🌱链式队列 🍂队列的基本操作及示例代码️🥑创建队列️🥑判空操作️🥑入队操作️🥑出…

docker容器与宿主机时间同步

前言 在Docker容器创建好之后,可能会发现容器时间跟宿主机时间不一致,此时需要同步它们的时间,让容器时间跟宿主机时间保持一致。 一、分析时间不一致的原因 宿主机采用了CST时区,CST应该是指(China Shanghai Time&…

JAVA线程池原理详解

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

AIDL 如何分片传输大量 Parcelable 数据列表

本文针对 AIDL 跨进程传输大量 Parcelable 数据所产生的问题总结出一套分片传输的解决方案,并分析了一下其实现的原理。 1. 概述 大家在通过 AIDL 实现跨进程数据传输的时候,可能会遇到数据量过大导致异常的情况,通常抛出的异常如下&#xf…

如何去掉图片水印不伤原图?无痕去水印教程分享!

如何去掉图片水印不伤原图?在电商广告设计和营销领域,水印已经成为一种常见的版权保护手段。不过,水印也给淘宝商家带来了一些困扰。那么如何去掉图片水印还能不伤原图呢,接下来,将分享简单好用的无痕去水印教程&#…

python中range函数的用法

range() 是Python的一个内置函数。语法格式为:range(start, stop, step) start是初始值,stop是最终值,step是步长。range()函数仅适用于整数,所有参数都必须是整数。步长值可以为正数或负数,不得为零。使用range函数时…

农田气象要素监测仪助力农业发展

随着科技的不断进步,现代农业已经越来越离不开科学技术的支持。其中,WX-NY12 农田气象要素监测仪成为了现代农业中不可或缺的一部分。这款仪器能够实时监测农田中的气象要素,如温度、湿度、光照、风速等,为农民提供更加精准的农业…

SOLIDWORKS 2024新功能之Electrical篇

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

解决Vscode使用git提交卡住的问题

使用Vscode的git提交代码经常会很慢/卡住。 先点击左下角,进入设置 找到git的配置(建议直接搜索),把use Editor As commit input的勾选去掉即可解决。

Flink 常用物理分区算子(Physical Partitioning)

Flink 物理分区算子(Physical Partitioning) 在Flink中,常见的物理分区策略有:随机分配(Random)、轮询分配(Round-Robin)、重缩放(Rescale)和广播(Broadcast)。 接下来,我们通过源码和Demo分别了解每种物理分区算子的作用和区别。 (1) 随机…

线上PDF文件展示

场景: 请求到的PDF(url链接),将其展示在页面上 插件: pdfobject (我使用的版本: "pdfobject": "^2.2.12" ) 下载插件就不多说了,下面将其引入&a…