Ionic4和NG-ZORRO-MOBILE结合

前言

小编在上篇博客介绍了Ionic4 环境搭建,今天介绍下Ionic4和NG-ZORRO-MOBILE组件库结合。

内容

什么是NG-ZORRO-MOBILE?

NG-ZORRO-MOBILE (Ant Design Mobile of Angular) 移动端UI组件库是 Ant Design
移动规范的 Angular 实现,详情请查看以下链接Ant Design Mobile of Angular

Ionic4和NG-ZORRO-MOBILE如何结合?

操作如下: 前提:已经搭建好Ionic4环境搭建,接入ng-zorro-antd-mobile,其中有两种方式:

  1. ng add ng-zorro-antd-mobile
    但这方式有个坑,它自动把app.component.html的内容强制替换为ng-zorro-antd-mobile的示例内容,所以执行完命令后要把app.component.html还原。用以下代码完全覆盖ng-zorro-antd-mobile生成后的代码:
  <ion-app> <ion-router-outlet></ion-router-outlet> </ion-app>
  1. 使用npm,则先安装模块,然后在 app.modules.ts 中,全局引入 ng-zorro-antd-mobile:
npm install ng-zorro-antd-mobile --save
import {
 NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile'; imports: [
 ...
    NgZorroAntdMobileModule   ] 

这样就可以使用ngzorro的组件啦。

小结
看似很简单,操作起来还是遇到不少问题哒,但是正是这些问题让我们成长,ngzorro组件的引入可以大大提高开发效率,赞!
发布了102 篇原创文章 · 获赞 69 · 访问量 13万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览