Angular 6 - Динамическая страница с угловыми материалами

Question

Я пытаюсь создать динамическую HTML-страницу на основе данных JSON.

Например: - Я ожидаю, что страница с полем 20% слева и окном 80% справа, а затем правым полем, разделенным сверху на 60% и снизу на 40%

Я не уверен, как этого добиться с угловым материалом & css.

{
   "horizontal" : [
     {
      width : 20%,
      height: 100%
     },
     {
       "vertical" : [
         {
           width : 80%,
           height: 60%
         },
         {
           width : 80%,
           height: 40%
         }
       ]
     }
   ],
 }

Спасибо

Answer 1

Можно использовать JSON и угловой материал для создания динамического макета страницы, но вам нужно немного изменить структуру JSON.

Я ожидаю, что страница с полем 20% слева и 80% справа и затем правая коробка отделяется как верхняя с 60% и нижняя с 40%

Структура, которую вы описываете, представляет собой контейнер с двумя столбцами. Первый столбец не имеет дополнительного содержимого, тогда как второй столбец содержит две строки. Это можно представить так:

layout = [
    {
      /* container */
      width: "100%",
      height: "100%",
      columns: [
        /* first column */
        {
          width: "20%",
          height: "100%",    
        },
        /* second column */
        {
          width: "80%",
          height: "100%",
          rows: [
            {
              /* first row of second column */
              width: "100%",
              height: "60%",
            },
            {
              /* second row of second column */
              width: "100%",
              height: "40%",    
            }
          ]
        }
      ]
    }
  ];

Чтобы сделать макет видимым, вам нужно перебрать все столбцы и строки в файле шаблона и установить соответствующие атрибуты @ angular / flex-layout:

<div class="container" fxLayout="column">
    <ng-container *ngFor="let container of style">
        <div fxFlex="0 0 {{container.width}}" [ngStyle]="{ 'height': container.height }" class="row">
            <ng-container *ngFor="let col of container.columns">
                <div fxFlex="{{col.width}}" [ngStyle]="{ 'height': col.height }" class="col" fxLayout="row wrap">
                    <ng-container *ngFor="let row of col.rows">
                        <div fxFlex="{{row.width}}" [ngStyle]="{ 'height': row.height }" class="row">
                        </div>
                    </ng-container>
                </div>
            </ng-container>
        </div>
    </ng-container>
</div>

Я создал для вас stackblitz , чтобы вы могли проверить весь код и проверить его, изменив значения для контейнера, столбцов и строк.

Этот код работает только с указанными глубинами вложения (контейнер> столбцы> строки). Если вам нужно больше или неизвестное количество уровней в вашем макете, вы можете сделать этот макет еще более общим, если вы работаете с ng-template например. как в этом универсальном макете stackblitz .