Рендеринг бесконечного дерева с пользовательским шаблоном - PullRequest
Новая
       7

Рендеринг бесконечного дерева с пользовательским шаблоном

0 голосов
/ 01 июня 2018

Это может быть общая / простая проблема, но я новичок в угловых.Итак, я пойман в этом.

Я пытаюсь создать приложение, которое требует рендеринга списка из структуры данных, которая является бесконечно вложенной (Под бесконечно я имею в виду неизвестное количество вложений).Я смог сделать рекурсию в html-коде после этой статьи .

Итак, основная идея состоит в том, чтобы предоставить данные и ключ рекурсии и поместить тег компонента в сам шаблон компонента.(Базовая рекурсия)

Но я хочу создать общий компонент, в котором макет ячейки может быть определен на уровне приложения / реализации.

То, что я построил до сих пор -

novo-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 - Не удается достичь рекурсии, поэтому внутренние элементы не используютсяотображается.

1 Ответ

0 голосов
/ 01 июня 2018

Основываясь на вашем ответе выше, я собираюсь предложить вам две идеи.Не уверен, будет ли работать то, что вы хотите.Если нет, я могу провести мозговой штурм и отредактировать этот ответ.

Если вам нужен базовый базовый компонент и вам нужно изменить стили вокруг него на основе определенных деталей во входных данных элемента, вы можете использовать ngClass или любой другойспособы динамического изменения стиля привязки.Я связываю вас с действительно полезной статьей ниже:

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

Еще одна вещь, которую вы можете сделать, в зависимости от того, насколько сложными будут изменения в html, - это создать несколько шаблонов.в пределах change-log-cell (что я не уверен, что вы хотите сделать), а затем используйте ngSwitch, отключив все, что вам нужно во входе элемента, чтобы определить, какой регистр переключения вы хотите отобразить в HTML.Указывая на официальные документы Angular о том, как это работает:

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

...