Question

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

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

因此，基本思想是提供数据和recursionKey，并将组件标记放在组件模板本身中。（基本递归）

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

到目前为止我已经建立了什么 -

NOVO-REC-列表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 - 无法实现递归，因此未显示内部元素。

Answer 1

根据你上面的回答，我将为你抛出2个想法。不确定是否可以满足您的需求。如果没有，我可以集体讨论并编辑这个答案。

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

Ruby 2.4 and Rails 4 stack level too deep (SystemStackError)

你可以做的另一件事，取决于对html的更改有多复杂，在change-log-cell内创建多个模板（我不确定你想做什么），然后使用{{1在项目输入中键入你需要的任何东西，以确定你想在html中呈现哪个开关案例。将您指向官方Angular文档，了解其工作原理：

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

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

1 个答案: