Ist es möglich, gemeinsame Teile der Vorlage zu abstrahieren?

Question

Zum Beispiel habe ich mehrere Komponenten für ausgelagerte Sammlungen. Beispiel Vorlage:

<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> 

Für eine bestimmte Komponente bin ich nur in Filter Eingabefelder, Tabellenkopf und Zeilenvorlage interessiert. Der ganze Rest wird für alle Komponenten wiederholt. Ist es möglich, das DRY-Prinzip irgendwie auf Vorlagen anzuwenden und Teile zu wiederholen?

Answer 1

Sie können <ng-content> für die Einfügung hinzufügen.

@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 {} 

verwenden Sie es dann wie

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

Transklusion Orte alle Top-Level-Elemente, die eine Klasse below an dem Ort, wo dieser Tag <ng-content select=".below"></ng-content> und der Rest ist, der nicht einen bestimmten Selektor überein, wo <ng-content></ng-content> ist platziert.

Answer 2

Sie könnten Komponenten für diese verschiedenen Teile erstellen und ng-content nutzen, wenn Sie andere Teile als Eingaben hinzufügen müssen. Hier

ist ein Beispiel:

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

Sie diese Komponente in einer anderen auf diese Weise verwenden können:

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

In Ihrem Fall könnte es so ähnlich sein:

<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> 

Die Vorlage der PageLayoutComponent-Komponente könnte folgende sein:

<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"> 
    <ng-content></ng-content> 
    </div> 
</div>