angular - 是否可以抽象出模板的公共(public)部分？

Question

例如，我有多个用于分页集合的组件。模板示例:

<div *ngIf="!isFormVisible">
    <button class="btn" [ngClass]="{'btn-info': filtered, 'btn-default': !filtered}" (click)="showForm()">Filter</button>
    <button class="btn btn-default" (click)="createNew()">Create new</button>
</div>

<div class="panel panel-default" *ngIf="isFormVisible">
    <div class="panel-heading">
        <h3 class="panel-title">Filter<button type="button" class="close" (click)="hideForm()">&times;</button></h3>
    </div>
    <div class="panel-body form-horizontal">
        <form (ngSubmit)="onFormSubmit()">
            <fieldset>
                <div class="form-group">
                    <label class="control-label col-md-2" for="id">Id</label>
                    <div class="controls col-md-10">
                        <input type="text" class="form-control [(ngModel)]="filter.id"/>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-md-2" for="userName">Username</label>
                    <div class="controls col-md-10">
                        <input type="text" class="form-control" [(ngModel)]="filter.userName"/>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <button type="submit" class="btn btn-default">Filter</button>
                        <button type="reset" class="btn btn-default" (click)="onFormReset()">Reset</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>

<div *ngIf="busy">
    <h1><i class="fa fa-spinner fa-spin fa-pull-left"></i> Loading...</h1>
</div>

<label *ngIf="!currentQuery.result?.length && !busy">No results</label>
<div class="table-responsive" *ngIf="currentQuery.result?.length && !busy">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>
                    <a href="javascript:void(0);" (click)="sortBy('id')">Id</a>
                </th>
                <th>
                    <a href="javascript:void(0);" (click)="sortBy('userName')">Username</a>
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="#user of currentQuery.result">
                <td>{{user.id}}</td>
                <td>{{user.userName}}</td>
                <td><button class="btn btn-default btn-xs" (click)="manageUser(user.id)">Manage</button></td>
            </tr>
        </tbody>
    </table>
</div>
<pagination [currentPage]="currentQuery.pageIndex" [totalPages]="currentQuery.totalPages" (onPageClick)="onPageClick($event)"></pagination>

对于特定组件，我只对过滤器输入字段、表标题和行模板感兴趣。对所有组件重复所有其余操作。是否有可能以某种方式将 DRY 原则应用于模板并抽象出重复部分？

Answer 1

您可以添加<ng-content>用于嵌入。

@Component({
  selector: 'reuse-cmp',
  ...
  template: `
<div>some fixed content</div>
  <ng-content></ng-content>
<div>some fixed content in the middle</div>
  <ng-content select=".below"></ng-content>
<div>some fixed content below</div>
`
})
class ReusablePart {}

然后像这样使用它

<reuse-cmp>
  <other-dynamic-content class="below"></other-dynamic-content>
  <dynamic-content></dynamic-content>
</resue-cmp>

嵌入放置具有类 below 的所有顶级元素在这个标签的地方<ng-content select=".below"></ng-content>其余的与特定选择器不匹配，其中 <ng-content></ng-content>已放置。