Question

我正在编写Angular 6应用，我已经意识到几个组件的结构非常相似：

过滤器表单，其中包含用户可以指定过滤器和查询按钮的输入；
显示结果的表；
服务器端分页（使用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的新手，所以我仍然不确定如何实现自己想要的东西。我最天真的尝试是在UiModule中创建Filter，Row和Field组件，然后像this demo一样重用它们。

但是现在，我一直在阅读有关ng-template和ng-template-outlet的信息，以便使用部分模板创建页面，但是我仍然不确定如何实现相同的效果，我所看到的解释和示例非常简单，或者在组件本身的模板中包含ng-template（不可重用），或者具有简单的静态模板……任何帮助将不胜感激。

具有ng-template，ng-container和ngTemplateOutlet的动态且可重用的部分模板？

0 个答案: