Angular Material 7 - Tree

< mat-tree> ，一个Angular Directive，用于创建一个带有材质样式的树来显示分层数据.

在本章中，我们将展示使用Angular Material绘制树所需的配置.

以下是修改后的模块描述符的内容 app.module.ts .

import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import {BrowserAnimationsModule} from '@angular/platform-browser/animations';import {MatTreeModule, MatIconModule, MatButtonModule} from '@angular/material'import {FormsModule, ReactiveFormsModule} from '@angular/forms';@NgModule({   declarations: [      AppComponent   ],   imports: [      BrowserModule,      BrowserAnimationsModule,      MatTreeModule, MatIconModule, MatButtonModule,      FormsModule,      ReactiveFormsModule   ],   providers: [],   bootstrap: [AppComponent]})export class AppModule { }

以下是修改后的HTML主机文件的内容 app.component.html .

               {{node.filename}} : {{node.type}}                                 {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}                     {{node.filename}}   

以下是修改过的ts文件的内容 app.component.ts .

import {FlatTreeControl} from '@angular/cdk/tree';import {Component, Injectable} from '@angular/core';import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';export class FileNode {   children: FileNode[];   filename: string;   type: any;}export class FileFlatNode {   constructor(      public expandable: boolean, public filename: string, public level: number, public type: any) {}}const TREE_DATA = JSON.stringify({   Documents: {      angular: {         src: {            compiler: 'ts',            core: 'ts'         }      },      material2: {         src: {            button: 'ts',            checkbox: 'ts',            input: 'ts'         }      }   }});@Injectable()export class FileDatabase {   dataChange = new BehaviorSubject([]);   get data(): FileNode[] { return this.dataChange.value; }   constructor() {      this.initialize();   }   initialize() {      const dataObject = JSON.parse(TREE_DATA);         const data = this.buildFileTree(dataObject, 0);      this.dataChange.next(data);   }    buildFileTree(obj: {[key: string]: any}, level: number): FileNode[] {      return Object.keys(obj).reduce((accumulator, key) => {         const value = obj[key];         const node = new FileNode();         node.filename = key;         if (value != null) {            if (typeof value === 'object') {               node.children = this.buildFileTree(value, level + 1);            } else {               node.type = value;            }         }         return accumulator.concat(node);      }, []);   }}@Component({   selector: 'app-root',   templateUrl: 'app.component.html',   styleUrls: ['app.component.css'],   providers: [FileDatabase]})export class AppComponent {   treeControl: FlatTreeControl;   treeFlattener: MatTreeFlattener;   dataSource: MatTreeFlatDataSource;   constructor(database: FileDatabase) {      this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,      this._isExpandable, this._getChildren);      this.treeControl = new FlatTreeControl(this._getLevel, this._isExpandable);      this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);      database.dataChange.subscribe(data => this.dataSource.data = data);   }   transformer = (node: FileNode, level: number) => {      return new FileFlatNode(!!node.children, node.filename, level, node.type);   }   private _getLevel = (node: FileFlatNode) => node.level;   private _isExpandable = (node: FileFlatNode) => node.expandable;   private _getChildren = (node: FileNode): Observable => observableOf(node.children);   hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;}

结果

验证结果.

详细信息

• 首先，我们使用mat-tree和mat-tree-node创建了树.

• 然后，我们在ts文件中创建了数据源并将其与mat-绑定树.