时间戳

首页 > 解决方案 > 使用自定义模板渲染无限树

angular - 使用自定义模板渲染无限树

问题描述

这可能是一个常见/简单的问题，但我是 Angular 的新手。所以，我陷入了这个困境。

我正在尝试构建一个应用程序，该应用程序需要从无限嵌套的数据结构中呈现列表（无限，我的意思是未知数量的嵌套）。在阅读这篇文章之后，我已经能够在 html 代码中进行递归。

所以，基本思想是提供一个数据和一个recursionKey，并将组件标签放在组件模板本身中。（基本递归）

但是我想创建一个通用组件，其中可以在应用程序/实现级别定义单元格布局。

我到目前为止所建造的 -

nov-rec-list-view.component

<div *ngIf="dataSource.length">
<div *ngFor="let item of dataSource">
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
    <novo-rec-list-view [recursionKey]="recursionKey" [dataSource]="item[recursionKey]"></novo-rec-list-view>
</div>

我使用这个组件作为 -

<novo-rec-list-view 
        id="change-log-list" 
        [recursionKey]="recursionKey"
        [dataSource]="treeNodeList">
    <ng-template #itemTemplate let-item="$implicit" let-i="index">
      <change-log-cell [item]="item">
      </change-log-cell>
    </ng-template>
</novo-rec-list-view>

其中change-log-cell包含单元格的布局。

这可以在angular4中实现吗？有人可以为我提供一些有关如何执行此操作的指示吗？

基于上述代码的最小工作应用程序 - https://stackblitz.com/edit/angular-snub7u?embed=1&file=src/app/app.component.ts

PS - 无法实现递归，因此不显示内部元素。

标签： angularangular-template

解决方案

根据您上面的回答，我将为您提出 2 个想法。不确定是否可以满足您的需求。如果没有，我可以集思广益并编辑此答案。

如果您需要一个基本通用组件，并且需要根据项目输入中的某些细节来修改它周围的样式，您可以使用ngClass或任何其他方法来动态更改样式绑定。我将您链接到下面的一篇非常有用的文章：

https://scotch.io/tutorials/the-many-ways-to-use-ngclass

根据对 html 的更改的复杂程度，您可以做的另一件事是在change-log-cell其中创建多个模板（我不确定您是否想要这样做），然后ngSwitch在项目输入中使用您需要的任何内容的键控确定要在 html 中呈现的 switch case。将您指向有关其工作原理的官方 Angular 文档：

https://angular.io/api/common/NgSwitch

推荐阅读