在Ionic中使用

第一个本地实例

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

1. 安装脚手架工具

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

  1. $ npm install -g ionic

2. 创建一个项目

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

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

  1. $ ionic start PROJECT-NAME

3. 初始化配置

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

  1. $ ng add ng-zorro-antd-mobile

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

4. 开发调试

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

  1. $ ionic serve

在Ionic中使用 - 图1

自行构建

1. 安装组件

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

2.引入模块

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

  1. import { NgModule } from '@angular/core';
  2. import { FormsModule } from '@angular/forms';
  3. import { RouteReuseStrategy } from '@angular/router';
  4. import { HttpClientModule } from '@angular/common/http';
  5. import { BrowserModule } from '@angular/platform-browser';
  6. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  7. import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  8. import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  9. import { StatusBar } from '@ionic-native/status-bar/ngx';
  10. import { AppComponent } from './app.component';
  11. import { AppRoutingModule } from './app-routing.module';
  12. import { NgZorroAntdMobileModule } from 'ng-zorro-antd-mobile';
  13. @NgModule({
  14. declarations: [AppComponent],
  15. imports: [
  16. BrowserModule,
  17. IonicModule.forRoot(),
  18. AppRoutingModule,
  19. BrowserAnimationsModule,
  20. FormsModule,
  21. HttpClientModule,
  22. NgZorroAntdMobileModule
  23. ],
  24. providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  25. bootstrap: [AppComponent]
  26. })
  27. export class AppModule {}

3.引入样式

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

  1. "styles": [
  2. "node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css",
  3. {
  4. "input": "src/theme/variables.scss"
  5. },
  6. {
  7. "input": "src/global.scss"
  8. }
  9. ]

undefined