在ionic中使用angular material

参考网址：

• https://material.angular.io/
• https://devdactic.com/angular-material-ionic-4/

前言：

• 如果你对ionic的自带的component 不太满意
• 如果你想在ionic 中使用更多的component
• 如果你不知道什么是：angular material
• 那么你可以继续看下去

注意：

• ionic 版本是ionic 4
• nodejs版本是：12.10.0
• angular版本是8.1.2
• ionic 项目开发中 对旧版本的兼容一直是个大问题。我的做法是
  • 直接创建一个新的project，一般都可以成功
  • 直接创建一个demo的project。然后将这个demo中的packge.json 文件内容比较，并移动到现有项目中。删除现有项目的node_modules 目录重新npm install。（注意备份，可能无法成功）

步骤

• cd 项目路径
• ng add @angular/material
• 将你要使用的component的module(比如MatIconModule）导入到你想使用的模块中（比如HomeModule）导入方法如下：

@NgModule({
  imports: [
    ...
    MatIconModule,
    ...

  ],
  declarations: [HomePage]
})

• 完成上述步骤后，你就可以直接在home page里添加component了

<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

选做

• 如果你要使用多个 angular material的组件，那么你可能会发现程序的moudule 变得很混乱。
• 那么你可以
  • 使用 ionic g 命令，然后选择module 创建一个module（比如materialModule）。
  • 将你想使用的component的moudle import到 materialModule

import { NgModule } from '@angular/core';

import {
  // MatTableModule,
  // MatStepperModule,
  // MatButtonModule,
  // MatFormFieldModule,
  // MatInputModule,
  // MatOptionModule,
  // MatSelectModule,
  MatIconModule,
  // MatPaginatorModule,
  // MatSortModule,
  MatListModule,
  MatExpansionModule
} from '@angular/material';


@NgModule({
  declarations: [],
  imports: [
    MatExpansionModule,
    //https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/
    MatIconModule,
    MatListModule
  ],
  entryComponents: [
  ],
  exports: [
    MatExpansionModule,
    MatIconModule,
    MatListModule
  ]
})
export class MaterialModule { }

• 将materialModule 导入到homeModule
• 完成上述步骤后，你就可以在Home页面使用你在 materialModule 导入的component了。