Angular2 में इनपुट के रूप में किसी घटक को अभिव्यक्ति कैसे पास करें?

Question

मुझे एक घटक को अभिव्यक्ति पारित करने की आवश्यकता है जिसका मूल्यांकन किसी घटक के टेम्पलेट के अंदर किया जाएगा।

उदाहरण के लिए, घटक: घटक के टेम्पलेट के साथ

@Component({ 
    selector: 'app-my-component', 
    ... 
}) 
export class MyComponent { 
    @Input items: MyClass; 
    @Input expression: String; 
    ... 
} 

:

<div *ngFor="let item of items"> 
    {{expression}} 
</div> 

MyComponent का उपयोग:

<app-my-component [items]="listOfItems" [expression]="'[item.id] item.name'"> 
</app-my-component> 

के रूप में वहाँ एक से अधिक इनपुट हो जाएगा, मैं चाहूँगा TemplateRef के उपयोग से बचने के लिए।

1) NgFor निर्देश का ngForTemplate इनपुट संपत्ति का उपयोग करना::

Answer 1

हो सकता है कि यह कर सकते हैं विकल्पों में से एक में मदद करता है

घटक

@Component({ 
    selector: 'app-my-component', 
    template: ` 
    <div *ngFor="let item of items template: itemTemplate"></div>` 
}) 
export class MyComponent { 
    @Input() items: any; 
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>; 
} 

जनक

<app-my-component [items]="listOfItems"> 
    <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template> 
</app-my-component> 

Plunker

2) NgTemplateOutlet निर्देश का उपयोग

घटक

@Component({ 
    selector: 'app-my-component', 
    template: ` 
    <div *ngFor="let item of items"> 
    <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template> 
    </div>` 
}) 
export class MyComponent { 
    @Input() items: any; 
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>; 
} 

जनक ही रहता है:

<app-my-component [items]="listOfItems"> 
    <ng-template let-item>[{{item.id}}] {{item.name}}</ng-template> 
</app-my-component> 

Plunker

<ng-template let-item>...</ng-template> के अंदर इस तरह आप वांछित उपयोग कर सकते हैं अभिव्यक्ति