बाध्यकारी घटनाओं जब कोणीय 2

Question

में एक ngForTemplate का उपयोग कर मान लीजिए कि मैं इस सरल सूची प्रतिपादन घटक मिल गया है दो:

import {Input, Component } from 'angular2/core' 

@Component({ 
    selector: 'my-list', 
    template: ` 
     <div *ngFor='#item of items' (click)='onItemClicked(item)'> 
      {{item}} 
     </div> 
    ` 
}) 
class MyList { 
    @Input() items: string[]; 

    onItemClicked(item) { console.log('Item clicked:', item); } 
} 

मैं इस तरह इसका इस्तेमाल:

<my-list [items]='myAppsItems'></my-list> 

अब तक तो अच्छा।

अगला मैं तय मैं उपयोगकर्ता प्रदान की गई मदों के लिए अपने ही टेम्पलेट आपूर्ति करने में सक्षम होना चाहता हूँ, इसलिए मैं घटक

@Component({ 
    selector: 'my-list', 
    template: ` 
     <template ngFor [ngForOf]="items" [ngForTemplate]="userItemTemplate" (click)='onItemClicked(item)'> 
     </template> 
    ` 
}) 
class MyList { 
    @Input() items: string[]; 
    @ContentChild(TemplateRef) userItemTemplate: TemplateRef; 

    onItemClicked(item) { console.log('Item clicked:', item); } 
} 

बदल सकते हैं और इस तरह से इसका इस्तेमाल करते हैं:

<my-list [items]='items'> 
    <template #item> 
     <h1>item: {{item}}</h1> 
    </template> 
</my-list> 

यह केवल काम करता है मैं किसी भी ईवेंट हैंडलर को सूची आइटम (plunker) पर बाध्य नहीं करता हूं। अगर मैं, क्लिक करें घटना के लिए बाध्य करने के लिए के रूप में मैं घटक के पहले संस्करण में किया था की कोशिश, कोणीय फेंकता निम्न अपवाद:

"Event binding click not emitted by any directive on an embedded template" 

यहाँ एक plunker showing that है। आप क्लिक बाध्यकारी को हटा सकते हैं और यह काम करेगा।

मैं इसे कैसे ठीक करूं? मैं बस उपयोगकर्ता को एक अधीनस्थ आइटम के लिए एक टेम्पलेट निर्दिष्ट करने में सक्षम होना चाहता हूं जिसे मैं ngFor के माध्यम से पुनरावृत्त करने जा रहा हूं, लेकिन मुझे उन वस्तुओं को हैंडलर बांधने में सक्षम होना चाहिए।

Answer 1

आइटम टेम्पलेट ऐप संदर्भ में परिभाषित किया गया है, यह स्पष्ट नहीं है कि इसे मेरी सूची घटक संदर्भ में कैसे संलग्न किया जाए। मैंने रैपर निर्देश बनाया है जो टेम्पलेट और इसके चर को संभालता है, निर्देशों को कैप्चर करने के लिए निर्देश को div में लपेटा जाता है। यह इस तरह से इस्तेमाल किया जा सकता:

@Directive({ 
    selector: '[ngWrapper]' 
}) 
export class NgWrapper 
{ 
    @Input() 
    private item:any; 

    private _viewContainer:ViewContainerRef; 

    constructor(_viewContainer:ViewContainerRef) 
    { 
     this._viewContainer = _viewContainer; 
    } 

    @Input() 
    public set ngWrapper(templateRef:TemplateRef) 
    { 
     var embeddedViewRef = this._viewContainer.createEmbeddedView(templateRef); 
     embeddedViewRef.setLocal('item', this.item) 
    } 
} 

@Component({ 
    selector: 'my-list', 
    directives: [NgWrapper], 
    template: ` 
     <template ngFor #item [ngForOf]="items"> 
     <div (click)="onItemClicked(item)"> 
     <template [ngWrapper]="userItemTemplate" [item]="item"></template> 
     </div> 
     </template> 
    ` 
}) 
class MyList { 
    @Input() items: string[]; 
    @ContentChild(TemplateRef) userItemTemplate: TemplateRef; 
    userItemTemplate1: TemplateRef; 

    onItemClicked(item) { 
     console.log('Item click:', item); 
    } 

    ngAfterViewInit(){ 
     this.userItemTemplate; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    directives: [MyList], 
    template: ` 
    <my-list [items]='items'> 
     <template #item="item"> 
      <h1>item: {{item}}</h1> 
     </template> 
    </my-list> 
    ` 
}) 
export class App { 
    items = ['this','is','a','test'] 

     onItemClicked(item) { 
     console.log('Item click:', item); 
    } 
} 

समाधान prerfect नहीं है, लेकिन लगभग अच्छा, जाँच plunkr।

Answer 2

अब एक सप्ताह के लिए इसका उत्तर ढूंढ रहे थे और मैं अंततः एक सुंदर सभ्य समाधान के साथ आया। NgForTemplate का उपयोग करने के बजाय मैं ngTemplateOutlet का उपयोग करने का सुझाव दूंगा।

यह पहले से ही बहुत अच्छी तरह से यहाँ वर्णित है: angular2 feeding data back to `<template>` from `[ngTemplateOutlet]`

सूची आइटम के लिए कस्टम टेम्पलेट घटक टैग के बीच रखा गया है:

<my-list> 
    <template let-item="item"> 
    Template for: <b>{{item.text}}</b> ({{item.id}}) 
    </template> 
</my-list> 

और घटक टेम्पलेट:

<ul> 
    <li *ngFor="let item of listItems" (click)="pressed(item)"> 
    <template 
     [ngTemplateOutlet]="template" 
     [ngOutletContext]="{ 
     item: item 
     }"> 
    </template> 
    </li> 
</ul> 

मैंने यहां एक उदाहरण दिया: https://plnkr.co/edit/4cf5BlVoqzZdUQASVQaC?p=preview