如何在Ionic中使用NG-ZORRO-MOBILE(How to use NG-ZORRO-MOBILE in Ionic)

[fisherspy]

第一个本地实例 First Local Development

我们可以在 ionic 开发框架下使用 NG-ZORRO-MOBILE，下面我们用一个简单的实例来说明。

NG-ZORRO-MOBILE can be used in Ionic, let's get started with a simple example.

1. 安装脚手架工具 Installation

使用前，务必确认 Node.js 已经安装。

Please make sure Node.js has been installed before use.

$ npm install -g ionic

2. 创建一个项目 Create a New Project

在创建项目之前，请确保 ionic 已被成功安装。

Please make sure ionic has been installed before use.

执行以下命令，ionic 会在当前目录下新建一个名称为 PROJECT-NAME 的文件夹，并自动安装好相应依赖。

A new project can be created using ionic CLI tools with following command.

$ ionic start PROJECT-NAME

3. 安装 Install ng-zorro-antd-mobile

进入项目文件夹，执行以下命令后将自动完成 ng-zorro-antd-mobile 的初始化配置。

ng-zorro-antd-mobile will be installed in the project folder with the following command.

$ ng add ng-zorro-antd-mobile

开发者可以通过增加参数来完成个性化的初始化配置，例如国际化或者自定义主题等，还可以快速生成模板代码，详细可以参考 脚手架 部分。

ng-zorro-antd-mobile supports init configuration with schematics, you can get more info in the schematics part.

4. 开发调试 Development & Debugging

一键启动调试，运行成功后显示欢迎页面。

Run your project now, you can see the img below now.

$ ionic serve

自行构建 Customized Work Flow

1. 安装组件 Install ng-zorro-antd-mobile

$ npm install ng-zorro-antd-mobile --save

2.引入模块 Import module

在 app.modules.ts 中，全局引入 ng-zorro-antd-mobile。

Add ng-zorro-antd-mobile globally in app.modules.ts。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouteReuseStrategy } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    NgZorroAntdMobileModule
  ],
  providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent]
})
export class AppModule {}

3.引入样式 Import style

在 angular.json 中，全局引入 ng-zorro-antd-mobile样式。

Add ng-zorro-antd-mobile style globally in angular.json。

"styles": [
  "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css",
  {
    "input": "src/theme/variables.scss"
  },
  {
    "input": "src/global.scss"
  }
]

[Shandawei]

Let me try

[CK110]

月底了，什么时候更新仓库啊，

[Guoyuanqiang]

@CK110 已经更新了

[chunghha]

You may want to add "--type=angular" to "ionic start" to start an Ionic 4 project.

[paranoidjk]

这个为啥不加到文档里面去而是 issue？

[fisherspy]

这个为啥不加到文档里面去而是 issue？
文档也有：http://ng.mobile.ant.design/#/docs/running-in-ionic/zh

[xianjie-li]

👍😋let me too try try