ionic4--使用nz-tree树形结构

1. 安装 Angular 的 ng-zorro-antd 组件库

npm install ng-zorro-antd@7.3.3 --save //因为我本地的Angular版本是7.2.2，所以只能用低版本的zorro

*注意需要查看本地Angular的版本，在 https://ng.ant.design/docs/introduce/zh 这个网站上查看所需要的版本

 

2. 安装 @angular/animations，同样需要和你本地Angular版本保持一致

cnpm install @angular/animations@7.2.2 --save

3. app.module.ts 文件中申明

import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


 imports:[
    NgZorroAntdModule,
    BrowserAnimationsModule]

4. 在angular.json文件中给style添加样式

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

5. 自定义一个module存放公共的module common-page.module.ts

import { NgModule } from '@angular/core';
import { NgZorroAntdModule, } from 'ng-zorro-antd'
@NgModule({
    imports: [NgZorroAntdModule],
    exports: [NgZorroAntdModule]
})
export class CommonPageModule { }

6. 在需要的页面的module中引入新创建的 module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { **** } from './***.page';
import {CommonPageModule} from '../../common-page.module'


const routes: Routes = [
  {
    path: '',
    component: ****
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    CommonPageModule,
    RouterModule.forChild(routes)
  ],
  declarations: [****]
})
export class ****PageModule {}

7.  编写组件代码逻辑

 <nz-input-group [nzSuffix]="suffixIcon" class="searchBar">
    <input type="text" nz-input placeholder="输入关键字快速过滤" [(ngModel)]="searchValue" />
  </nz-input-group>
  <ng-template #suffixIcon>
    <i nz-icon type="search"></i>
  </ng-template>
  <nz-tree [nzData]="nodes" [nzSearchValue]="searchValue" (nzClick)="nzEvent($event)" (nzExpandChange)="nzEvent($event)"
    (nzSearchValueChange)="nzEvent($event)">
  </nz-tree>

//ts文件

import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd'


 public searchValue = '';

  public nodes: NzTreeNodeOptions[] = [
    {
      title: '0-0',
      key: '00',
      expanded: true,
      children: [
        {
          title: '0-0-0',
          key: '000',
          expanded: true,
          children: [
            { title: '0-0-0-0', key: '0000', isLeaf: true },
            { title: '0-0-0-1', key: '0001', isLeaf: true },
            { title: '0-0-0-2', key: '0002', isLeaf: true }
          ]
        },
        {
          title: '0-0-1',
          key: '001',
          children: [
            { title: '0-0-1-0', key: '0010', isLeaf: true },
            { title: '0-0-1-1', key: '0011', isLeaf: true },
            { title: '0-0-1-2', key: '0012', isLeaf: true }
          ]
        },
        {
          title: '0-0-2',
          key: '002'
        }
      ]
    },
    {
      title: '0-1',
      key: '01',
      children: [
        {
          title: '0-1-0',
          key: '010',
          children: [
            { title: '0-1-0-0', key: '0100', isLeaf: true },
            { title: '0-1-0-1', key: '0101', isLeaf: true },
            { title: '0-1-0-2', key: '0102', isLeaf: true }
          ]
        },
        {
          title: '0-1-1',
          key: '011',
          children: [
            { title: '0-1-1-0', key: '0110', isLeaf: true },
            { title: '0-1-1-1', key: '0111', isLeaf: true },
            { title: '0-1-1-2', key: '0112', isLeaf: true }
          ]
        }
      ]
    },
    {
      title: '0-2',
      key: '02',
      isLeaf: true
    }
  ];

nzEvent(event: NzFormatEmitEvent): void {
    console.log(event);
}

最后结果：