例如，我有多个用于分页集合的组件。模板示例：
<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()">×</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原理应用于模板并提取出重复的部分？
您可以添加<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>的位置。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句