如何在Ionic中使用NG-ZORRO-MOBILE(How to use NG-ZORRO-MOBILE in Ionic)
fisherspy opened this issue · 7 comments
第一个本地实例 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"
}
]
Let me try
月底了,什么时候更新仓库啊,
@CK110 已经更新了
You may want to add "--type=angular" to "ionic start" to start an Ionic 4 project.
这个为啥不加到文档里面去而是 issue?
这个为啥不加到文档里面去而是 issue?
文档也有:http://ng.mobile.ant.design/#/docs/running-in-ionic/zh
👍😋let me too try try