کنترل Tree در انگولار متریال 7 – آموزش انگولار متریال

چهارشنبه ۱۰ شهریور ۱۴۰۰
بازدید ۵۹۶ نفر
سعید سیفی زاده
(5 امتیاز از 1 رای)
Loading...

تصویر angular-material-7-tree_6398 کنترل Tree در انگولار متریال 7 – آموزش انگولار متریال

کنترل Tree در انگولار متریال

<mat-tree> یک دستورالعمل انگولار است که به منظور ایجاد ساختار درختی با استایل متریال دیزاین مورد استفاده قرار می گیرد. در این بخش چگونگی ایجاد و استفاده از این کنترل را با استفاده از یک مثال ساده بررسی خواهیم کرد.

محتوای فایل 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 { }

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 { }

محتوای فایل app.component.html:

<mat-tree [dataSource] = "dataSource" [treeControl] = "treeControl">
   <mat-tree-node *matTreeNodeDef = "let node" matTreeNodeToggle matTreeNodePadding>
      <button mat-icon-button disabled></button>
      {{node.filename}} : {{node.type}}
   </mat-tree-node>
   <mat-tree-node *matTreeNodeDef = "let node;when: hasChild" matTreeNodePadding>
      <button mat-icon-button matTreeNodeToggle [attr.aria-label] = "'toggle ' + node.filename">
         <mat-icon class = "mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
      </button>
      {{node.filename}}
   </mat-tree-node>
</mat-tree>

<mat-tree [dataSource] = "dataSource" [treeControl] = "treeControl">

<mat-tree-node *matTreeNodeDef = "let node" matTreeNodeToggle matTreeNodePadding>

{{node.filename}} : {{node.type}}

</mat-tree-node>

<mat-tree-node *matTreeNodeDef = "let node;when: hasChild" matTreeNodePadding>

<mat-icon class = "mat-icon-rtl-mirror">

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

</mat-icon>

</button>

</mat-tree-node>

</mat-tree>

محتوای فایل 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<FileNode[]>([]);
   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<FileNode[]>((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<FileFlatNode>;
   treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;
   dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;
   constructor(database: FileDatabase) {
      this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,
      this._isExpandable, this._getChildren);
      this.treeControl = new FlatTreeControl<FileFlatNode>(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<FileNode[]> => observableOf(node.children);
   hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;
}

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<FileNode[]>([]);

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<FileNode[]>((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<FileFlatNode>;

treeFlattener: MatTreeFlattener<FileNode, FileFlatNode>;

dataSource: MatTreeFlatDataSource<FileNode, FileFlatNode>;

constructor(database: FileDatabase) {

this.treeFlattener = new MatTreeFlattener(this.transformer, this._getLevel,

this._isExpandable, this._getChildren);

this.treeControl = new FlatTreeControl<FileFlatNode>(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<FileNode[]> => observableOf(node.children);

hasChild = (_: number, _nodeData: FileFlatNode) => _nodeData.expandable;

}

نتیجه

بعد از اجرای برنامه خروجی زیر را مشاهده خواهید کرد:

تصویر angular-material-7-tree_6398_2 کنترل Tree در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل های mat-tree و mat-tree-node یک درخت را ایجاد کرده ایم.
سپس داده های موجود در کلاس کامپوننت را به درخت ایجاد شده بایند کردیم.

انگولار متریال - Buttons انگولار متریال - Tab