Как правильно «обернуть» компонент Angular 2, который содержит <template> теги?

Question

Я пытаюсь обернуть компонент, первоклассный PickList в этом случае, с моим собственным компонентом, чтобы я мог добавить к нему атрибут NgModel. Я следую this guide as my reference.

Таким образом, подборщик primeNG позволяет пользователю выбирать и переупорядочивать элементы из списка.

<p-pickList [source]="list1" [target]="list2"> 
    <template let-car> 
     <div class="ui-helper-clearfix"> 
      <img src="showcase/resources/demo/images/car/{{car.brand}}.gif" style="display:inline-block;margin:2px 0 2px 2px"/> 
      <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div> 
     </div> 
    </template> 
</p-pickList> 

Так что я хочу, чтобы иметь возможность обернуть выше в моем компоненте

Я пытался делать это самостоятельно. Мой подход состоял в том, чтобы принять значения исходного кода компонента @Input, @Output и @ContentChild в мой пользовательский компонент. По существу это всего лишь redefining the original variables of the component and proxying it through. Так это выглядит следующим образом:

import { 
    Component, OnInit, Input, forwardRef, Output, EventEmitter, 
    ContentChild, TemplateRef 
} from '@angular/core'; 
import { 
    ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, 
    NG_VALIDATORS 
} from '@angular/forms'; 

@Component({ 
    selector: 'form-primeng-picklist', 
    template: ` 
    <p-pickList [source]="source" 
     [target]="target" [responsive]="responsive" [showSourceControls]="showSourceControls" 
     [showTargetControls]="showTargetControls" (onMoveToTarget)="onMoveToTarget" 
     (onMovetoSource)="onMovetoSource" [sourceStyle]="sourceStyle" [targetStyle]="targetStyle"> 
     <template [pTemplateWrapper]="itemTemplate" ></template> 
    </p-pickList> 
    `, 
    providers: [ 
     { 
      provide: NG_VALUE_ACCESSOR, 
      useExisting: forwardRef(() => PickListFormComponent), multi: true 
     }, 
     { 
      provide: NG_VALIDATORS, 
      useExisting: forwardRef(() => PickListFormComponent), multi: true 
     } 
    ], 
}) 
export class PickListFormComponent implements ControlValueAccessor { 

    @Input() source: any[]; 
    @Input() target: any[]; 
    @Input() sourceHeader: string; 
    @Input() targetHeader: string; 
    @Input() responsive: boolean; 
    @Input() style: any; 
    @Input() styleClass: string; 
    @Input() sourceStyle: any; 
    @Input() targetStyle: any; 
    @Input() showSourceControls: boolean = true; 
    @Input() showTargetControls: boolean = true; 
    @Output() onMovetoSource: EventEmitter<any> = new EventEmitter(); 
    @Output() onMoveToTarget: EventEmitter<any> = new EventEmitter(); 
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>; 

    propagateChange: any =() => { }; 
    validateFn: any =() => { }; 

    constructor() { } 

    /** 
    * Write a new value to the element. 
    */ 
    writeValue(value: any): void { 
     if (value) { 
      console.log('VALUE IS = ' + JSON.stringify(value)); 
      this.target = value; 
     } 
    } 
    /** 
    * Set the function to be called when the control receives a change event. 
    */ 
    registerOnChange(fn: any): void { 
     this.propagateChange = fn; 
    } 
    /** 
    * Set the function to be called when the control receives a touch event. 
    */ 
    registerOnTouched(fn: any): void { 

    } 

    validate(c: FormControl) { 
     return this.validateFn(c); 
    } 
} 

Пример использования (это не удается)

<form-primeng-picklist 
    [source]="myList" [target]="artifactorySelectedList" [responsive]="true" [showSourceControls]="false" 
    [showTargetControls]="false" (onMoveToTarget)="addChecksums($event)" (onMovetoSource)="removeChecksums($event)" 
    [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}" 
    [(ngModel)]="testPickList" name="testPickList"> 
      <template let-artifact> 
      <div class="ui-grid" style="border-bottom:1px solid #D5D5D5;"> 
       <div class="ui-grid-row"> 
        <div class="ui-grid-col-1" style="text-align:center"> 
         <span><i class="fa fa-archive fa-3x" aria-hidden="true"></i></span> 
        </div> 
        <div class="ui-grid-col-11"> 
         <span><strong>Name:</strong> {{artifact.artifact}}</span> 
         <span><strong>Revision:</strong> {{artifact.revision}}</span> 
         <strong>Organisation:</strong> {{artifact.organisation}} 
         <strong>Branch:</strong> {{artifact.branch}} 
        </div> 
       </div> 
      </div> 
     </template> 
</form-primeng-picklist> 

Так что это работает, когда я PASSTHROUGH любые @Input и @Output значения в моем HTML. Это не работает, когда я пытаюсь «пропустить» тег <template> с контентом, и я изо всех сил пытаюсь понять, как это сделать.

Итак, общий вопрос: Как правильно обернуть пользовательский компонент, который позволяет использовать теги <template>? (Ничего не делает)

Answer 1

Возможно, это решение будет работать для вас

подборщик список-form.component.ts

Заменить

<template [pTemplateWrapper]="itemTemplate" ></template> 

с

<template let-item> 
    <template [pTemplateWrapper]="itemTemplate" [item]="item"></template> 
</template> 

Итак, ваш шаблон должен быть ok like:

<p-pickList ...> 
    <template let-item> 
    <template [pTemplateWrapper]="itemTemplate" [item]="item"></template> 
    </template> 
</p-pickList>