テンプレートの共通部分を抽象化することは可能ですか？

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> 

トランスクルーの場所のように、このタグが<ng-content select=".below"></ng-content>ある場所や特定のセレクタに一致しない安静時にクラスbelowを持っているすべてのトップレベル要素を、それを使用<ng-content></ng-content>が置かれます。

Answer 2

他の部品を入力として含める必要がある場合は、これらの異なる部品用のコンポーネントを作成し、ng-contentを活用することができます。ここで

はサンプルです：

@Component({ 
    selector: 'test' 
    template: ` 
    <div> 
     <ng-content></ng-content> 
    </div> 
    ` 
}) 
export class TestComponent { 
} 

あなたはこのコンポーネントは、別の1にこの方法を使用することができます。

<pageLayout> 
    <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> 
     (...) 
</pageLayout> 

：あなたのケースでは

<test> 
    <div> 
    Part to include in the test component template (see ng-content) 
    </div> 
</test> 

を、それがそのようなものかもしれません

PageLayoutComponentコンポーネントのテンプレートは、次のようになります。