求推荐Angular 2、4中可自定义模板的树形结构Node包（类似angular-ui-tree）

Absolutely! There are several reliable Node packages for Angular 2 and 4 that let you build tree structures with custom template support—right in line with the functionality you liked from angular-ui-tree. Here are my top recommendations:

1. ng2-tree #

• A widely used option that checks all your boxes: it supports custom node templates, drag-and-drop, node expansion/collapse, and even inline node editing.
• Install it via npm with this command: npm install ng2-tree --save
• You can define fully custom node layouts using standard Angular template syntax, so you have full control over how each node looks and interacts with users.

2. angular-tree-component #

• This is a robust, feature-rich library that’s perfect for both simple and complex tree structures. It offers drag-and-drop, checkbox selection, lazy loading for large datasets, and of course, custom template support.
• Get it set up with: npm install angular-tree-component --save
• The custom template feature lets you inject your own Angular components, buttons, styling, or any other elements into each node—super flexible for matching your app’s design system.

3. ngx-treeview #

• While it’s optimized for hierarchical selection workflows, it still supports custom node templates and works seamlessly with Angular 2/4. It’s a great pick if you need tree structures with checkbox functionality alongside custom rendering.
• Install command: npm install ngx-treeview --save

Quick Example of Custom Templates #

No matter which package you go with, custom templates typically use Angular’s ng-template or a package-specific template input. For example, with angular-tree-component, your setup might look like this:

<tree-root [nodes]="yourTreeData">
  <ng-template #treeNodeTemplate let-node>
    <div class="custom-node-style">
      <span class="node-label">{{ node.data.itemName }}</span>
      <button class="edit-btn" (click)="handleEdit(node)">Edit</button>
      <button class="delete-btn" (click)="handleDelete(node)">Delete</button>
    </div>
  </ng-template>
</tree-root>

This lets you add interactive elements, custom classes, or any other UI components you need within each tree node.

内容的提问来源于stack exchange，提问作者Chaitanya Thakre