Рендеринг HTML с использованием ngTemplateOutlet в Angular - PullRequest
Новая
       6

Рендеринг HTML с использованием ngTemplateOutlet в Angular

0 голосов
/ 10 апреля 2020

У меня есть проект, который нужно будет рекурсивно отобразить HTML на странице. Для этого я сохраняю формат HTML в массиве вложенных объектов. Учитывая, что HTML - это набор вложенных строк и столбцов, пример чего-то, что мне нужно будет отобразить, будет выглядеть так:

enter image description here

Этот макет соответствует данным, которые я получаю из базы данных (где size - ширина столбца, охватывающего его родительскую строку, а blocks - это divs, которые содержат содержимое внутри столбца): 

var response = [
  {
    "uid": "a",
    "order": 0,
    "layout": {
      "rows": [
        {
          "uid": "qz",
          "columns": [
            {
              "uid": "ugjm",
              "size": 6,
              "blocks": [ // NOTE: BLOCK WITH A COLUMN AS PARENT
                {
                  "uid": "bh",
                  "data": {
                    "content": "row qz, column ugjm, block bh"
                  },
                  "type": 2,
                  "order": 0
                }
              ]
            },
            {
              "uid": "plm",
              "size": 6,
              "rows": [ // NOTE: ROW WITH A COLUMN AS PARENT
                {
                  "uid": "bzx",
                  "columns": [
                    {
                      "uid": "1cd",
                      "size":  6,
                      "blocks": [
                        {
                          "uid": "nbv",
                          "data": {
                            "content": "row qz, row bzx, column 1cd, block nbv"
                          }
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        },
      ],
      "columns": 12
    },
  }
]

Я нашел отличную статью о рендеринге рекурсивных данных с использованием ngTemplateOutlet. Ссылка: https://trungk18.com/experience/angular-recursive-view-render/, но похоже, что вложенная модель точно соответствует родительскому элементу, и, как видно на рисунке выше, столбцы могут содержать строки ИЛИ блоки .

Например, в моих данных один из возможных путей к блоку контента может быть:

строка -> столбец -> блок -> содержимое

или он может быть вложен дальше:

строка -> столбец -> строка -> столбец -> блок -> содержимое

, поэтому я не совсем уверен как объяснить это в моем рекурсивном методе для отображения HTML на странице. В статье, на которую я ссылаюсь, используется ngTemplateOutlet, и я подумал, что это будет хороший способ начать, но я не уверен, как использовать это для учета неизвестных глубин вложения! 

<ul>
  <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: list }"></ng-container>
</ul>

<ng-template #recursiveListTmpl let-list>
  <li *ngFor="let item of list">
     {{ item.title }} 
    <ul *ngIf="item.children.length > 0">
      <ng-container *ngTemplateOutlet="recursiveListTmpl; context:{ $implicit: item.children }"></ng-container>
    </ul>
  </li>
</ng-template>

Спасибо!

...