极客教程Angular PrimeNG树形模板
Angular PrimeNG是一个开源的框架，有丰富的原生Angular UI组件，用来做很好的造型，这个框架用来做响应式的网站，非常方便。它提供了大量的模板、组件、主题设计、广泛的图标库等等。在这篇文章中，我们将学习Angular PrimeNG Tree 模板.
Angular PrimeNG Tree用于以树形方式显示分层数据。模板允许极大的定制，我们可以为树添加额外的细节。
Angular PrimeNG树模板：
- header:它是页眉组件。
- empty:当表格为空时显示模板。
- footer:该模板显示了表格的页脚。
- loader。模板在表格加载数据时显示。
语法:
<p-tree [value]="files1">
<ng-template pTemplate="header">
Tutorials available
</ng-template>
</p-tree>
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new geeks_angular
第2步：在创建你的项目文件夹即geeks_angular后，使用以下命令移动到它。
cd geeks_angular
步骤3：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：项目结构将看起来像如下。
使用以下命令运行应用程序：编写以下命令来运行应用程序
ng serve --open
例子1：在下面的例子中，我们有一个简单的带头的树。
app.component.html
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Templates</h3>
<h5>Basic</h5>
<p-tree [value]="files1">
<ng-template pTemplate="header">
<h3>Tutorials available</h3>
</ng-template>
</p-tree>
app.component.ts
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
files1: TreeNode[] = [];
files2: TreeNode[] = [];
ngOnInit() {
this.files1 = [
{
label: 'Data Structures',
icon: 'pi pi-folder',
children: [
{
label: 'List',
icon: 'pi pi-folder',
children: [
{
label: 'Singly List',
icon: 'pi pi-code',
},
{
label: 'Doubly List',
icon: 'pi pi-code',
},
{
label: 'Circularly List',
icon: 'pi pi-code',
},
],
},
{
label: 'Queue',
icon: 'pi pi-folder',
children: [
{
label: 'Simple Queue',
icon: 'pi pi-code',
},
{
label: 'Doubly ended Queue',
icon: 'pi pi-code',
},
],
},
],
},
{
label: 'Algorithms',
icon: 'pi pi-folder',
children: [
{
label: 'Greedy ',
icon: 'pi pi-code',
},
{
label: 'BFS ',
icon: 'pi pi-code',
},
{
label: 'Dynamic Programming',
icon: 'pi pi-code',
},
],
},
];
this.files2 = this.files1;
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { HttpClientModule } from
'@angular/common/http';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeModule,
ButtonModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([{
path: '',
component: AppComponent
}]),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
例子2：在下面的例子中，我们有一个树的空模板。
app.component.html
<h1 style="color:green;
text-align:center;">
GeeksforGeeks
</h1>
<h3>Angular PrimeNG Tree Templates</h3>
<p-tree [value]="files1">
<ng-template pTemplate="header">
<h3>Tutorials available</h3>
</ng-template>
</p-tree>
<h3>No data Table</h3>
<p-tree [value]="no_data">
<ng-template pTemplate="empty">
<h3>Tutorials aren't available</h3>
</ng-template>
</p-tree>
app.component.ts
import { Component } from '@angular/core';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
files1: TreeNode[] = [];
files2: TreeNode[] = [];
ngOnInit() {
this.files1 = [
{
label: 'Data Structures',
icon: 'pi pi-folder',
children: [
{
label: 'List',
icon: 'pi pi-folder',
children: [
{
label: 'Singly List',
icon: 'pi pi-code',
},
{
label: 'Doubly List',
icon: 'pi pi-code',
},
{
label: 'Circularly List',
icon: 'pi pi-code',
},
],
},
{
label: 'Queue',
icon: 'pi pi-folder',
children: [
{
label: 'Simple Queue',
icon: 'pi pi-code',
},
{
label: 'Doubly ended Queue',
icon: 'pi pi-code',
},
],
},
],
},
{
label: 'Algorithms',
icon: 'pi pi-folder',
children: [
{
label: 'Greedy ',
icon: 'pi pi-code',
},
{
label: 'BFS ',
icon: 'pi pi-code',
},
{
label: 'Dynamic Programming',
icon: 'pi pi-code',
},
],
},
];
this.files2 = this.files1;
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from
'@angular/platform-browser';
import { HttpClientModule } from
'@angular/common/http';
import { BrowserAnimationsModule } from
'@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { TreeModule } from 'primeng/tree';
import { ButtonModule } from 'primeng/button';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
TreeModule,
ButtonModule,
HttpClientModule,
FormsModule,
RouterModule.forRoot([{
path: '',
component: AppComponent
}]),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule { }
输出:
