ng-zorro-mobile,踩坑记

  • 兼容ionic4,但暂不兼容ionic3

ionic3和ionic4差别是比较大的,所以ionic3二次封装的组件基本是不能直接用在ionic4上。ng-zorro-mobile并不是依赖ionic的组件封装,而是基于angular6封装,所以理论上是兼容ionic3/4的,只是ionic3当前稳定版最高兼容到angular5,要使用ng-zorro-mobile要自行调整代码。而ionic4是兼容angular6的,所以可无缝使用ng-zorro-mobile。

  • 原有项目使用ng add ng-zorro-mobile会被强制修改app.component.html

使用ng add命令,会自动安装模块依赖并配置项目,但是ng-zorro-mobile却不分青红皂白强制把app.component.html的内容替换为其示例内容:

<a href="https://github.com/NG-ZORRO/ng-zorro-antd-mobile" target="_blank" style="display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;">
  <img height="300" src="https://gw.alicdn.com/tfs/TB18hC5dPDpK1RjSZFrXXa78VXa-440-550.png">
</a>

这是不应该的,所以如果执行了ng add ng-zorro-mobile命令的,记得把app.component.html回滚。

  • 因为懒加载,NgZorroAntdMobileModule要调整导入位置

ng-zorro-mobile文档里面说在app.module.ts添加NgZorroAntdMobileModule就完事,其实并不准确的,因为ionic4或angular6项目默认是懒加载的,所以NgZorroAntdMobileModule应该加在懒加载的module上面。

  • Modal, Toast等使用上的坑

这个较详细说明一下

在官方文档中,Modal是这样用的: http://ng.mobile.ant.design/#/components/modal/zh

import { Component } from '@angular/core';
import { Modal, Toast } from 'ng-zorro-antd-mobile';

@Component({
  selector: 'demo-modal-operation',
  template: `
    <WingBlank>
      <WhiteSpace></WhiteSpace>
      <div Button (onClick)="showOpeartion()">operation</div>
      <WhiteSpace></WhiteSpace>
    </WingBlank>
  `,
  providers: [Toast, Modal]
})
export class DemoModalOperationComponent {
  constructor(private _modal: Modal, private _toast: Toast) {}

  showOpeartion() {
    Modal.operation([
      { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
      { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }
    ]);
  }
}

看到只用了Modal的全局方式,所以个人认为下面这段注入初始化的东西是没有用便去掉:

constructor(private _modal: Modal, private _toast: Toast) {}

结果报错不能使用,于是把它重新加回去还是不能使用,提示下面的错误信息:

image.png

这个ModalComponent是什么鬼?还要在entryComponents里面声明?然后就试着在entryComponents加入,并在自动提示下补充import,变成:

import { NgZorroAntdMobileModule, ModalComponent, ToastComponent } from 'ng-zorro-antd-mobile';

@NgModule({
  entryComponents: [ModalComponent, ToastComponent],
})

然后运行,正常使用!而这些是官方文档没有写的!!

官方文档有待完善一下!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

iOS开发中点击推送跳转到指定页面

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

4572
来自专栏Brian

Mac 配置终端环境

Mac 配置终端开发环境 ---- 概述 作为一个服务端开发人员基本上都是通过终端和服务器打交道,所以一个好个开发人员那么他的终端配置也是高效的。“工欲善事必先...

43411
来自专栏陈满iOS

iOS·采用第三方(百度地图SDK)实现定位等功能开发

首先,申请一个baidu账号,接着进入新建密钥入口申请成为baidu地图开发者,填写相关开发者信息和短信验证码。接下来点击创建应用,如官方文档新建密钥文档指南里...

4263
来自专栏ShaoYL

代理和通知

2075
来自专栏Java学习123

访问Tomcat时无需加端口号

3077
来自专栏数据之美

linux 系统监控、诊断工具之 lsof 用法简介

1、lsof 简介 lsof 是 linux 下的一个非常实用的系统级的监控、诊断工具。 它的意思是 List Open Files,很容易你就记住了它是 “...

4076
来自专栏张戈的专栏

MySQL主从、字典死锁、连接数的Python监控脚本

最近,公司的系统在天津增加了不少异地容灾,其中就有异地双主 MySQL。由于容灾环境一般只会在出现较大的网络故障或故障演习的时候用到,所以,容灾系统的可用性就只...

4277
来自专栏向治洪

React Native移植原生Android

(一)前言 之前已经写过了有关React Native移植原生Android项目的文章,不过因为RN版本更新的原因吧,跟着以前的文章可能会出现一些问题,对于初学...

1947
来自专栏陈满iOS

报错笔记:Thread 1: EXC_BAD_INSTRUCTION (code=EXC_I386_INVOP, subcode=0x0)

https://stackoverflow.com/questions/24337791/exc-bad-instruction-code-exc-i386-i...

1.5K2
来自专栏24K纯开源

Ubuntu13.04配置:Vim+Syntastic+Vundle+YouCompleteMe

序言     使用Ubuntu和vim已经有一段时间了,对于Vim下的插件应用,我总是抱着一股狂热的态度。这次,又在网上闲逛着,发现了一个个人博客提到了Vim代...

27810

扫码关注云+社区

领取腾讯云代金券