我希望在angular中显示不同的树节点内容显示格式

export interface TreeNode {
  name: string;
  type: string;
}

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tree',
  template: `
    <ul>
      <li *ngFor="let node of nodes">
        <ng-container [ngSwitch]="node.type">
          <ng-container *ngSwitchCase="'folder'">
            <span class="folder-icon"></span>
          </ng-container>
          <ng-container *ngSwitchCase="'file'">
            <span class="file-icon"></span>
          </ng-container>
          <ng-container *ngSwitchDefault>
            <span class="default-icon"></span>
          </ng-container>
        </ng-container>
        {{ node.name }}
      </li>
    </ul>
  `,
  styles: [`
    .folder-icon {
      /* Define styles for folder icon */
    }
  
    .file-icon {
      /* Define styles for file icon */
    }
  
    .default-icon {
      /* Define styles for default icon */
    }
  `]
})
export class TreeComponent {
  @Input() nodes: TreeNode[];
}

import { Component } from '@angular/core';
import { TreeNode } from './tree-node';
  
@Component({
  selector: 'app-root',
  template: `
    <app-tree [nodes]="treeNodes"></app-tree>
  `
})
export class AppComponent {
  treeNodes: TreeNode[] = [
    { name: 'Folder 1', type: 'folder' },
    { name: 'File 1', type: 'file' },
    { name: 'Folder 2', type: 'folder' },
    { name: 'File 2', type: 'file' },
    { name: 'Node 1', type: 'unknown' }
  ];
}