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

news2024/11/17 21:19:13

作者: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.coloradmin.cn/o/1247155.html

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

相关文章

静电放电模型中的阻容参数

依据静电放电产生原因及其对集成电路放电方式的不同,静电放电模型可分成以下四类模型:1、人体放电模型(HBM, Human-Body Model)、2、机器放电模型(MM, Machine Model)、3、器件充电模型(CDM, Charged-Device Model)、4、电场感应模型(FIM, Field-Induced…

从设计上理解JDK动态代理

作者简介:大家好,我是smart哥,前中兴通讯、美团架构师,现某互联网公司CTO 联系qq:184480602,加我进群,大家一起学习,一起进步,一起对抗互联网寒冬 照理说,动态…

【Django-DRF】md笔记第6篇:Django-DRF的视图、认证、分页和其他功能详解

本文从分析现在流行的前后端分离Web应用模式说起,然后介绍如何设计REST API,通过使用Django来实现一个REST API为例,明确后端开发REST API要做的最核心工作,然后介绍Django REST framework能帮助我们简化开发REST API的工作。 DR…

win10 tensorrt源码编译onnx

直接利用官方源码,如下图,trtexec源码在TensorRT安装目录下,双击trtexec.sln文件,使用vs2019打开源码工程。 如下图,以yolov8为例子,编译成功项目之后,设置命令行参数: --onnxd:/yo…

表单邮箱密码登录 原生+Jquery实现

文章目录 效果代码邮箱验证正则表达式HTMLCSS JS 效果 正确密码为:123456 点击登录按钮校验。 代码 表单校验 - CodeSandbox 邮箱验证正则表达式 /(?:[a-z0-9!#$%&*/?^_{|}~-](?:\.[a-z0-9!#$%&*/?^_{|}~-])*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1…

实现HTTP服务监听,快来试试springboot服务端接口公网远程调试

🌈个人主页:聆风吟 🔥系列专栏:网络奇遇记、Cpolar杂谈 🔖少年有梦不应止于心动,更要付诸行动。 文章目录 📋前言一. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 二. 内网穿透2.1 安装…

AND/选品机制算法/用户表设计

3大步骤总结 大步骤总结: 第一大步骤: 生成AND算法机制所需要的8个表 AND musics Works Pool Table(音乐作品池表) 需要创建表 所需归类 AND算法池 AND videos Works Pool Table(视频作品池表) 需要创建表 所需归类 AND算法池 AND image…

基于Halcon的空间域图像滤波

任务描述: 图为HALCON中附带的例图“particle”。图中为某种液体,里面悬浮了微小颗粒,请分析出液体中的颗粒。 案例分析: 图中存在两种类型的对象:大的明亮物体和亮度较低的小物体(颗粒)。图像…

Rust UI开发(一):使用iced构建UI时,如何在界面显示中文字符

注:此文适合于对rust有一些了解的朋友 iced是一个跨平台的GUI库,用于为rust语言程序构建UI界面。 iced的基本逻辑是: UI交互产生消息message,message传递给后台的update,在这个函数中编写逻辑,然后通过…

经典的回溯算法题leetcode全排列问题思路代码详解

目录 全排列问题 leetcode46题.全排列 leetcode47题.全排列II 对回溯算法感兴趣的朋友也可以多多支持一下我的其他文章。 回溯算法详解-CSDN博客 经典的回溯算法题leetcode组合问题整理及思路代码详解-CSDN博客 经典的回溯算法题leetcode子集问题思路代码详解-CSDN博客 …

ResizeObserver loop limit exceeded报错解决方案

前言: 控制台没有报错,但是开发Vue项目过程中一直报ResizeObserver loop limit exceeded 错,找到以下解决方式。在main.js文件中重写 ResizeObserver 方法。 main.js文件 (完整版) import { createApp } from "v…

基于element自动表格

需求是根据JSON文件生成表格,包含配置和自动props属性以及过滤器; 数据示例: 表格设置: /*** 表格表头信息* chineseToPinYin: 这是封装的根据中文汉字转换为拼音的方法* prop: 表头字段名* filter: 数据过滤器* label: 表头显示…

从零学算法400

400.给你一个整数 n ,请你在无限的整数序列 [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, …] 中找出并返回第 n 位上的数字。 示例 1: 输入:n 3 输出:3 示例 2: 输入:n 11 输出:0 解释:第…

Windows Python3安装salt模块失败处理

复现CVE-2020-11651时候运行CVE-2020-11651的poc时候需要salt模块 在下载时出现了错误 尝试在网上寻找解决方法: 1.更新 setuptools 和 wheel pip install --upgrade setuptools wheel 2. 安装Microsoft Visual C 14.0 因为salt模块包包使用了 C/C 扩展&#x…

Flutter开发警告Constructors in ‘@immutable‘ classes should be declared as ‘const‘

文章目录 警告信息报错代码警告原因修改后的代码 警告信息 Flutter开发遇到如下警告 Constructors in ‘immutable’ classes should be declared as ‘const’. 报错代码 class TaskWidget extends StatefulWidget {final String title;final bool isChecked;final int ord…

AD9528学习笔记

前言 AD9528是ADI的一款时钟芯片,由2-stage PLL组成,并且集成JESD204B/JESD204C SYSREF信号发生器,SYSREF发生器输出单次、N次或连续信号,并与PLL1和PLL2输出同步,从而可以实现多器件之间的同步。 AD9528总共有14路输…

电源模块重轻载变化测试的测试目的、测试标准、测试方法介绍

电源自动测试系统针对电源模块的各项测试项目提供最合适的测试方案,解决测试需求,提高测试效能。重轻载变化测试是电源模块测试的项目之一,是为了检测负载变化时输出电压的变化情况。为此,纳米软件将介绍电源重轻载变化测试的方法…

盘点43个Python登录第三方源码Python爱好者不容错过

盘点43个Python登录第三方源码Python爱好者不容错过 学习知识费力气,收集整理更不易。 知识付费甚欢喜,为咱码农谋福利。 项目名称 bnuz中国电信校园网模拟登录,python selenium BNUZ教务系统认证爬虫Python语言实现,你可以用…

为什么在Pycharm中使用Pandas画图,却不显示?

问题描述: 在 Pycharm 中使用 Pandas 的 plot() 方法画图,却不显示图像,源代码如下: import pandas as pd import numpy as np# 从文件中读取数据 starbucks pd.read_csv(./file_csv/directory.csv)# 按照国家分组,…

【T3】畅捷通T3登录时操作日期的日历中日期与星期对应关系错误。

【问题描述】 畅捷通T3软件登录的时候, 在选择操作日期位置,点击出日历后发现: 几月几日和星期几是对不上的。但是查看电脑系统右下角日期,是正确的。 例如:2023年11月24日应该是星期五,这里反而是星期三。…