Динамические и многоразовые частичные шаблоны с ng-template, ng-container и ngTemplateOutlet? - PullRequest
Новая
       32

Динамические и многоразовые частичные шаблоны с ng-template, ng-container и ngTemplateOutlet?

0 голосов
/ 17 октября 2018

Я пишу приложение на Angular 6, и я понял, что несколько компонентов имеют очень похожую структуру:

  1. Форма фильтра, со входами, где пользователь может указать фильтры и кнопку запроса;
  2. Таблица, которая отображает результаты;
  3. Разбивка на стороне сервера (с ngx-pagination), где пользователь может указать, сколько элементов на странице нужно показать, и перемещаться по страницам.

Они следуют шаблону ниже (примечание: фильтры имеют только несколько полей из таблицы, а не все): 

<!-- filter part -->
<div class="form-group">
  <!-- first row -->
  <div class="margin-top20">
    <!-- field 1 -->
    <label class="filter-label">Filter 1</label>
    <div class="inline margin-left5">
      <input type="text" [(ngModel)]="field1" class="filter-input"/>
    </div>
    <!-- repeats for every field -->
  </div>
  <!-- second row -->
  <div class="margin-top20">
    <!-- same deal -->
  </div>
  <!-- query button -->
  <div class="margin-top20">
    <button type="button" (click)="query()">QUERY</button>
  </div>
</div>

<div class="pagination">
  <!-- table part -->
  <table class="my-table">
    <thead>
      <tr><th>Field 1</th><th>Field 2</th><th>Field 3</th></tr>
    </thead>
    <tbody>
      <tr *ngFor="let result of results" | paginate: pagination">
        <td>{{result.field1}}</td><td>{{result.field2}}</td><td>{{result.field3}}</td><!-- etc -->
      </tr>
    </tbody>
  </table>
  <!-- pagination using ngx- -->
  <pagination-controls [id]="pagination.id" (pageChange)="selectPage($event)"></pagination-controls>
  <select name="itemsPerPage [(ngModel)]="pagination.itemsPerPage">
    <option [ngValue]="25">25</option>
    <option [ngValue]="50">50</option>
    <option [ngValue]="75">75</option>
  </select>
</div>

То, чего я хотел бы достичь, это что-то вроде этого: 

<app-filter>
  <app-row>
    <app-field name="Field1" model="field1"/>
    <!-- etc -->
  </app-row>
  <app-row>
    <button type="button" (click)="query()">
  </app-row>
</app-filter>
<app-table model="results">
  <app-column>field1</app-column>
  <app-column>field2</app-column>
  <app-column>field3</app-column>
</app-table>

Я новичок в Angular 6, поэтому я все еще не уверен, как добиться того, чего я хочу.Моей первой, очень наивной попыткой было создание компонентов Filter, Row и Field внутри UiModule, а затем их повторное использование, как в этой демонстрации .

Но теперь я читал оng-template и ng-template-outlet, чтобы создать страницу из частичных шаблонов, но я все еще не уверен, как добиться того же эффекта, все объяснения и примеры, которые я видел, очень просты или имеют ng-template внутри шаблона самого компонента (который не может быть повторно использован) или имеет простой статический шаблон ... любая помощь будет оценена.

...