Angular PrimeNG树形图标

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，该框架可用于制作响应式网站，非常方便。这篇文章将向我们展示如何在Angular PrimeNG中使用树形图标。

Angular PrimeNG Tree Icons用于与树元素一起显示图标。如果树节点的展开和折叠状态需要不同的图标，可以使用expandedIcon和collapsedIcon属性。

语法:

<p-tree [value]="..."></p-tree>

// In treeNode
{
    label: 'A',
    icon: 'pi pi-folder',
}

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

步骤3：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Project Structure

例子1：下面是一个简单的例子，演示了Angular PrimeNG树的使用，在这个例子中，我们正在制作一个带有简单图标的树状组件。

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h4>Angular PrimeNG Tree Icon</h4>
<p-tree [value]="files1"></p-tree>

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  files1: TreeNode[];
  
  constructor(private nodeService: NodeService) {}
  
  ngOnInit() {
    this.files1 = [
      {
        label: 'A',
        icon: 'pi pi-folder',
  
        children: [
          {
            label: 'B',
            icon: 'pi pi-folder',
  
            children: [
              {
                label: 'C',
                icon: 'pi pi-folder',
              },
              {
                label: 'D',
                icon: 'pi pi-folder',
              },
            ],
          },
          {
            label: 'E',
            icon: 'pi pi-folder',
  
            children: [
              {
                label: 'F',
                icon: 'pi pi-folder',
              },
            ],
          },
        ],
      },
      {
        label: 'G',
        icon: 'pi pi-folder',
  
        children: [
          {
            label: 'H',
            icon: 'pi pi-folder',
          },
          {
            label: 'I',
            icon: 'pi pi-folder',
          },
          {
            label: 'J',
            icon: 'pi pi-folder',
          },
        ],
      },
    ];
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } 
    from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    TreeModule,
    ButtonModule,
    InputTextModule,
    HttpClientModule,
    FormsModule,
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [NodeService],
})
export class AppModule {}

输出:

例子2：下面是一个简单的例子，演示了Angular PrimeNG树的使用，在这个例子中，我们使用collapsedIcon和expandedIcon属性来使图标的行为与动作特别一致。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG Tree Icon</h4>
<p-tree [value]="files1"></p-tree>

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})
export class AppComponent {
    files1: TreeNode[] = [];
  
    constructor(private nodeService: NodeService) { }
  
    ngOnInit() {
        this.files1 = [
            {
                label: 'A',
                expandedIcon: 'pi pi-folder-open',
                collapsedIcon: 'pi pi-folder',
                children: [
                    {
                        label: 'B',
                        expandedIcon: 'pi pi-folder-open',
                        collapsedIcon: 'pi pi-folder',
                        children: [
                            {
                                label: 'C',
                                icon: 'pi pi-folder',
                            },
                            {
                                label: 'D',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                    {
                        label: 'E',
                        expandedIcon: 'pi pi-folder-open',
                        collapsedIcon: 'pi pi-folder',
                        children: [
                            {
                                label: 'F',
                                icon: 'pi pi-folder',
                            },
                        ],
                    },
                ],
            },
            {
                label: 'G',
                collapsedIcon: 'pi pi-folder',
                expandedIcon: 'pi pi-folder-open',
                children: [
                    {
                        label: 'H',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'I',
                        icon: 'pi pi-folder',
                    },
                    {
                        label: 'J',
                        icon: 'pi pi-folder',
                    },
                ],
            },
        ];
    }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { NodeService } from './nodeservice';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        TreeModule,
        ButtonModule,
        InputTextModule,
        HttpClientModule,
        FormsModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    providers: [NodeService],
})
export class AppModule { }

输出: