角の再利用可能なテンプレート

Question

再利用可能な書き込み可能ですng-template？私の多くのコンポーネントはまったく同じものを使用しますng-template。私はすべてのコンポーネントでの背後に、このテンプレートとロジックを繰り返したくない

<kendo-grid> 
    <kendo-grid-column field="group"> 
     <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form"> 
      <kendo-dropdownlist #listGroups [data]="groups" 
           textField="title" 
           valueField="id" 
           [valuePrimitive]="true" 
           [filterable]="true" 
           [formControl]="form.get('groupId')"> 
      </kendo-dropdownlist> 
     </ng-template> 
    </kendo-grid-column> 
</kendo-grid> 

：たとえば
。私は、カスタムコンポーネント記述し、このコードを縮小することができます：

<kendo-grid> 
    <kendo-grid-column field="group"> 
     <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="form"> 
      <my-custom-component [formControl]="form.get('groupId')"> 
      </my-custom-component> 
     </ng-template> 
    </kendo-grid-column> 
</kendo-grid> 

を私はより多くをしたい：私は複数のコンポーネント間でテンプレートを共有する方法this threadとngTemplateOutletを説明thisはなく、見つけた

<kendo-grid> 
    <kendo-grid-column field="group"> 
     <ng-template [ngTemplateOutlet]="templateFromAnotherSource"> 
     </ng-template> 
    </kendo-grid-column> 
</kendo-grid> 

。

Answer 1

問題は、ng-templateをコンパイルする必要があることです。理由を理解するにはHere is what you need to know about dynamic components in Angularと読んでください。

今、テンプレートはコンポーネントの一部としてしかコンパイルできません。したがって、このテンプレートを使用してコンポーネントを定義し、viewChildまたはディレクティブを使用してこのテンプレートファクトリにアクセスする必要があります。 viewChildではlife-cycle hooks and change detectionに依存していますので、私は指示的なアプローチをとっていきます。

@Component() { 
    template: '<ng-template requestor>...</ng-template>' 
} 
class NgTemplateProviderComponent { 
    t: TemplateRef; 

    register(t) { 
     this.t = t; 
    } 
} 

@Directive() { 
    selector: 'requestor; 
} 
class TemplateRequestor { 
    constructor(t: TemplateRef, p: NgTemplateProviderComponent) { 
     p.register(t); 
    } 
} 

がtemplateRefがHere is how to get ViewContainerRef before @ViewChild query is evaluatedを読んでもらうためにディレクティブを使用して、このアプローチについて詳しく知ることができます。ここでは擬似コードです。

class SomeComponent { 
    constructor(r: ComponentFactoryResolver, i: Injector) { 
     const f = r.resolveComponentFactory(NgTemplateProviderComponent); 
     const templateRef =f.create(i).instance.t; 
    } 
} 

だけにして、テンプレートをレンダリングするngTemplateOutletディレクティブを使用することができます。

はその後、あなたは、NgTemplateProviderComponent部品工場へのアクセスを得るtemplateRefを取得するために、そのインスタンスを作成する必要があります。