在ionic4中使用 NG-ZORRO-MOBILE

最新推荐文章于 2022-04-17 12:48:53 发布
原创 最新推荐文章于 2022-04-17 12:48:53 发布 · 969 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ionic4 #NG-ZORRO-MOBILE #ANGULAR

本文详细介绍了如何使用NG-ZORRO-MOBILE组件库，包括安装组件、引入模块、添加样式以及在页面中使用NoticeBar组件的具体步骤。解决引入组件时可能遇到的错误，并展示了最终的效果。

NG-ZORRO-MOBILE官网
官网有在ionic中使用的教程

我使用的是用npm引入的方式

1.安装组件
在这里插入图片描述

2.引入模块
在 app.modules.ts 中，全局引入 ng-zorro-antd-mobile。
在这里插入图片描述

3.引入样式
在 angular.json 中，全局引入 ng-zorro-antd-mobile样式。
在这里插入图片描述
4.在tab1.page.html使用NoticeBar组件

在这里插入图片描述
此时控制台报错：core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘option’ since it isn’t a known property of ‘NoticeBar’. ("
在这里插入图片描述

解决：需要在tab1.module.ts中，引入 ng-zorro-antd-mobile
在这里插入图片描述

效果：
在这里插入图片描述

zebraMeat
关注
ionic5/angular11里集成ng-zorro-antd-mobile(Ant Design Mobile of Angular)V4.0.0使用跑马灯UI
weixin_44341110的博客
04-17 1334
在ionic5项目里安装ng-zorro-antd-mobile 一、安装ng-zorro-antd-mobile。 执行npm/cnpm install ng-zorro-antd-mobile --save 二、在 app.modules.ts 中，全局引入ng-zorro-antd-mobile。 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-brow.
Angular 4入门教程系列：15：NG-ZORRO的使用方式
热门推荐
知行合一 止于至善
11-14 3万+
这篇文章介绍一下Angular的优秀国内UI组件库NG-ZORRO，并演示一下如何使引入NG-ZORRO到项目之中。Why NG-ZORRONG-ZORRO由阿里计算平台事业部、阿里云等不同部门的开发人员在原业务组件的基础上构建而成，于2017/8/15在github上发布了第一个对外的版本0.5.0-rc.0，版本更新很快，三个月已经接近有12次更新之多，基本周发布的快速迭代，目前最新版本为0.6
ng-zorro-antd-mobile：基于Ant Design Mobile和Angular的可配置Mobile UI组件。 :ant:
01-31
NG-ZORRO-Mobile 这是Ant Design Mobile规范的Angular实现，可为阿里巴巴大数据无线服务提供服务。 扫描二维码 产品特点 一种用于Angular移动Web应用程序的企业级UI设计语言。 UI是完全可配置和可扩展的，可轻松适应各种产品样式。 使用TypeScript开发，提供类型定义文件，支持类型和属性智能提示，以简化业务开发。 提供“按需加载组件” /“网页高清显示” /“ SVG图标”优化功能，集成开发。 支持在Ionic 运行。 环境支援 带 iOS 7.0+ Android 4.4+ 角支撑 现在支持Angular ^10.0.0 。 安装 我们建议使用@angular/cli进行安装，这不仅使开发更容易，而且还使您可以利用丰富的角度软件包和工具生态系统。 $ ng new PROJECT_NAME $ cd PROJECT_NAME $ ng add ng-zorro-antd-mobile 有关@angular/cli更多信息，请@angular/cli。 您也可以使用npm或yarn安装ng-zorro-antd-mobi
Ionic4和NG-ZORRO-MOBILE结合
脚踏实地，仰望星空
10-31 3302
前言 小编在上篇博客介绍了Ionic4 环境搭建，今天介绍下Ionic4和NG-ZORRO-MOBILE组件库结合。 内容 什么是NG-ZORRO-MOBILE？ NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移动端UI组件库是 Ant Design 移动规范的 Angular 实现，详情请查看以下链接Ant Design Mobile of An...
angular引入ng-zorro中的icon图标方法
weixin_42902260的博客
04-17 3013
1.angular.json中引入 "assets": [ "src/favicon.ico", "src/assets", { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ], "styles": [
NoticeBar 通知栏组件，封装好的可直接使用
阿良的博客
05-06 3482
1.项目中遇到NoticeBar效果怎么写 组件代码如下 <template> <transition name="fade"> <!--主要内容--> <div class="noticebar" :style="{backgroundColor:data.backround}"> <div style="ma...
NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移动端UI组件库正式发布
weixin_34345753的博客
10-10 477
NG-ZORRO-MOBILE 是 Ant Design 移动规范的 Angular 实现。 Ant Design 作为服务于企业级产品的设计体系，基于『确定』和『自然』的设计价值观，通过模块化的解决方案，降低冗余的生产成本，用其简单且高效的设计理念，让设计者专注于更好的用户体验。 Ant Design 发布之初仅有 React 版本实现，为了让 Angular 开发者也能享受 Ant Desi...
NG-ZORRO-MOBILE 抽屉遮罩层点击关闭抽屉
qq_45832807的博客
07-08 814
https://ng.mobile.ant.design/#/components/drawer/zh 框架自带的抽屉是没有遮罩层的，刚开始准备直接写在抽屉上面，但是遮罩层点击事件会冒泡。 解决方法: 自定义遮罩层 html <ion-button size="small" (click)="openDrawer('line')"> <ion-icon class="icon navigation"></ion-icon> </ion-button.
ng-zorro-mobile中遇到的问题
weixin_30915951的博客
04-08 1572
一、Modal(弹出框)使用上的问题 在官方文档中，Modal是这样使用的： 这里需要注意的一点就是，看到上方代码中只用了Modal的全局方式，所以个人认为下面这段注入初始化的东西是没有用的便去掉： 结果报错不能使用，于是把它重新加回去还是不能使用，提示下面的报错信息： 提示需要将ModalServiceComponent在entryComponents里面声明？然后试着在e...
NG-ZORRO-MOBILE - Ant Design Mobile Of Angular
大强博客
05-28 2893
NG-ZORRO-MOBILE - Ant Design Mobile Of Angular 搜索组件... English 0.12.x 组件 Ant Design Mobile of Angular 快速上手 在Ionic中使用 脚手架 定制主题 更新日志 贡献指南 Components Layout FlexFlex...
Angular 滚动条 angular-nice-bar
前端栈开发
07-16 1115
angular-nice-bar 详细介绍 一个轻量级的Angular scrollbar. Install bower install angular-nice-bar --save Usage &lt;link rel="stylesheet" href="bower_components/angular-nice-bar/dist/css/angular-nice-bar.cs...
ionic中使用NG-ZORRO-MOBILE
xiejunyan666的博客
04-03 968
在ionic中加入NG-ZORRO-MOBILE； 官网方法：http://ng.mobile.ant.design/#/docs/running-in-ionic/zh ionic使用方法：https://blog.youkuaiyun.com/renmengmeng520/article/details/83582414 ionic4使用：https://www.jianshu.com/p/f7c3...
ionic3使用阿里NG-ZORRO组件库
qq993284758的博客
03-04 1861
之前写的。NG-ZORRO是阿里基于ng开发的一个组件库。突发奇想，我试着在ionic中使用，里面封装了许多组件，比起自己去封装然后还一堆bug，这也许是一种选择。NZ文档要在ionic使用NZ库，必须先安装ng动画库，ionic中是没有的，需要自己安装。最新版本nz需要ng4.4.4，除了动画包，其他的ng包也要对应。目前ionic-ng-nz对应的是：ionic3.8-ng4.4.4-nz0....
Angular +Ionic常用ng命令
weixin_44794123的博客
09-17 672
一，创建项目 node环境：NodeJs 1.安装脚手架 npm install -g @angular/cli //失败卸载 npm uninstall -g @angular/cli 2.淘宝镜像： npm install -g cnpm --registry=https://registry.npm.taobao.org npm cache clean //清除缓存 3.初始化 ng -v 4.创建项目 ng new filename cd filename cnpm in
ionic4中引入ng-zorro, 实现环形进度条
weixin_34174422的博客
08-07 654
1、创建项目 ionic start myIonic tabs --type=angular 2、安装ng-zorro 这个模块依赖动画模块，所以安装两个插件 npm install @angular/animations@4.4.4 --save --save-exact npm install ng-zorro-antd --sa...
（58页PPT）智慧产业园区解决方案.pptx
12-01
（58页PPT）智慧产业园区解决方案.pptx
Abaqus显式分析中Voigt粘弹性模型的VUMAT子程序实现与损伤准则扩展
最新发布
12-01
针对Abaqus显式动力学分析框架，本文介绍一种基于Voigt构型的粘弹性各向同性材料模型在VUMAT用户子程序中的实现方案。该子程序完整构建了Voigt粘弹性本构关系，适用于显式求解环境下的材料响应模拟。用户可根据具体分析需求，对子程序进行扩展修改，以引入基于应力状态或应变状态的损伤判据，从而模拟材料在复杂载荷下的渐进失效行为。 资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
基于双模型架构的智能皮肤癌诊断系统项目极简说明_融合互联网加医疗与AI医学影像分析技术解决皮肤癌诊断中专业门槛高资源不均误诊率高等痛点核心采用ViTSCD模型基于VisionTra.zip
12-01
基于双模型架构的智能皮肤癌诊断系统项目极简说明_融合互联网加医疗与AI医学影像分析技术解决皮肤癌诊断中专业门槛高资源不均误诊率高等痛点核心采用ViTSCD模型基于VisionTra
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值