कोणीय 2 बाइंडिंग के साथ एनजी-सामग्री के लिए एचटीएमएल गुजर रहा है

Question

मैं नींव सीएसएस ढांचे के लिए कोणीय घटक लिख रहा हूं। मैं टैब घटक पर काम कर रहा हूं, और कुछ HTML को <ng-content> पर पास करने में सक्षम होना चाहता हूं।

PARENT खाका

<tabs [data]='example'> 
    <div> Age <br> {{item.age}} </div>` 
</tabs> 

टैब घटक

<ul class="tabs" #tabs> 
    <li *ngFor="let item of data | async" (click)="tabClick($event)"> 
     <a>{{item.name}}</a> 
    </li> 
</ul> 
<div> 
    <ng-content></ng-content> 
</div> 

:

समस्या मैं भी, एचटीएमएल, जो किसी उपयोगकर्ता पर बाइंडिंग डाल सकता है पारित करने के लिए की जरूरत है इस तरह है,

टैब TYPESCRIPT

@Component({ 
    selector: 'tabs', 
    templateUrl: './tabs.component.html' 
}) 

export class TabsComponent { 
    @Input('data') data:any; 
    @ViewChild('tabs') tabs: ElementRef; 
} 

itemexample सरणी में किसी ऑब्जेक्ट का संदर्भ है।

हालांकि, मैं इस त्रुटि मिलती है: इससे पहले कि यह <ng-content> निर्देश में डाला जाता है Cannot read property 'name' of undefined item रूप में मूल्यांकन किया जा रहा है।

क्या इस सीमा को पाने के लिए कोई तरीका है, या क्या मैं इस गलत तरीके से जा रहा हूं?

Answer 1

अद्यतन कोणीय 5

ngOutletContextngTemplateOutletContext

देखें करने के लिए दिया गया था भी https://github.com/angular/angular/blob/master/CHANGELOG.md#500-beta5-2017-08-29

मूल

ngTemplateOutlet या ngForTemplate कि उपयोग के मामले के लिए इस्तेमाल किया जा सकता है:

<tabs [data]='example'> 
    <ng-template let-item> 
    <div> Age <br> {{item.age}} </div>` 
    </ng-template> 
</tabs> 

@Component({ 
    ... 
    template: ` 
    <ul class="tabs" #tabs> 
     <li *ngFor="let item of data | async" (click)="tabClick($event)"> 
      <a>{{item.name}}</a> 
     </li> 
    </ul> 
    <div> 
     <ng-template [ngTemplateOutlet]="templateRef" [ngTemplateOutletContext]="{$implicit: (data | async)}"></ng-template> 
    </div> 
    ` 
}) 
class TabsComponent { 
    @ContentChild(TemplateRef) templateRef:TemplateRef; 
} 

भी देखें Angular 2 bind transcluded content to loop variable

Answer 2

आप के बजाय इस तरह का उपयोग करना चाहिए,

<tabs [data]='example'> 
    <div> Age <br> {{item.age}} </div>` 
</tabs> 

घटक टाइपप्रति

@Component({ 
    selector: 'tabs', 
    templateUrl: './tabs.component.html' 
}) 

export class TabsComponent { 
    @Input() data:any; 
    item:any{}; 
} 

अपने में सामग्री टी प्रक्षेपण बाइंडिंग

<tabs [data]='example'> 
    <div> Age <br> {{item.age}} </div>` 
</tabs> 

DEMO

Answer 3

आप एनजी-सामग्री घटक के लिए आइटम वस्तु उत्तीर्ण करने की आवश्यकता के साथ के रूप में

<div class="tabs-body"> 
     <ng-content select=".tabs-body"> </ng-content> 
     </div> 

अपने निधन के रूप में एक चयनकर्ता परिभाषित करते हैं।

<ng-content [item]="selectedTab></ng-content> 

मैं क्या टैब क्लिक करें घटना के पीछे निहित है, लेकिन आप जो घटक को दे दिया जाएगा selectedTab उस आइटम को वस्तु प्रदान कर सकते हैं पर कुछ नहीं कर रहा हूँ।

घटक है कि टैब दृश्य को नियंत्रित करेगा निम्नलिखित हो सकते हैं: जब आप क्लिक

@Input() item: Item; 

और यह है कि वस्तु पारित करेंगे। मैं गलत कोण से इस पर हमला कर रहा हूं लेकिन शायद यह आपको किसी तरह से मदद करेगा।