टेम्पलेट रीफ का उपयोग कैसे करें?

Question

मैं कोणीय 2 में एक टेम्पलेट गतिशील रूप से निर्माण करने का एक तरीका खोजने का प्रयास कर रहा हूं। मैं सोच रहा था कि टेम्पलेट आरएफ ऐसा करने का एक तरीका प्रदान कर सकता है। लेकिन मुझसे गलती हो सकती है।

I found an example of templateRef being used here.

मैं इस उदाहरण में templateRef देख रहा था। मैंने देखा कि वाक्यविन्यास [ng-for-template] है मैंने [ngForTemplate] भी कोशिश की क्योंकि मुझे पता है कि यह हाल ही में बदल गया है।

import {Component, TemplateRef} from 'angular2/core'; 

@Component({ 
    selector : 'body', 
    template : ` 
     <template [ngForTemplate]="container"> 
      <div class="container"></div> 
     </template> 
    ` 
}) 

export class App 
{ 
    @ContentChild(TemplateRef) container; 

    constructor() {} 

    ngAfterContentInit() 
    { 
     console.log(this); 
    } 
} 

यह उदाहरण एक त्रुटि फेंकता है:

Can't bind to 'ngForTemplate' since it isn't a known native property 

तो सबसे पहले मैं सोच रहा हूँ

तो इस समय मैं इस किया है। ऐसा करने का सही तरीका क्या है? The docs don't provide any examples.

दूसरा, क्या कोई अच्छा तरीका है कि मैं अपने टेम्पलेट में नया टेम्पलेट तर्क जोड़ सकता हूं या गतिशील रूप से टेम्पलेट का निर्माण कर सकता हूं? आवेदन की संरचना विभिन्न संरचनात्मक संयोजनों की एक बड़ी मात्रा हो सकती है। तो यदि संभव हो तो मैं देखना चाहूंगा कि मैं अलग-अलग एनजीआईएफ और एनजीस्विच स्टेटमेंट्स के समूह के साथ एक विशाल टेम्पलेट के बिना ऐसा कर सकता हूं ..

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

Answer 1

अपने स्वयं के टेम्पलेट के निर्देश यह है बनाना का उपयोग कर सकते है मुश्किल नहीं है, आपको दो मुख्य चीजों को समझना होगा

• TemplateRef में क्या है आपके <template> टैग
• ViewContainerRef गुंटर द्वारा टिप्पणी के अनुसार, टेम्पलेट का दृश्य रखता है और आपको टेम्पलेट के अंदर दृश्य को स्वयं एम्बेड करने देता है।

मैं इस उदाहरण का उपयोग करूंगा जब मैंने इस issue को हल करने का प्रयास किया था, तो मेरा दृष्टिकोण इसके लिए सबसे अच्छा नहीं है, लेकिन यह यह समझने के लिए काम करेगा कि यह कैसे काम करता है।

मैं यह भी स्पष्ट करना चाहता हूं कि आप अपने टेम्पलेट्स के लिए किसी भी विशेषता का उपयोग कर सकते हैं, भले ही वे पहले से ही अंतर्निहित निर्देशों द्वारा उपयोग किए जा रहे हों (जाहिर है यह एक अच्छा विचार नहीं है, लेकिन आप इसे कर सकते हैं)।

ngIfIn (मेरे गरीब दृष्टिकोण)

<template [ngIfValue]="'make'" [ngIfIn]="obj"> 
    This will print 
</template> 
<template [ngIfValue]="'notExistingValue'" [ngIfIn]="obj"> 
    This won't print 
</template> 

के लिए मेरे दृष्टिकोण पर विचार करें हम यहाँ दो आदानों का उपयोग कर दो टेम्पलेट्स प्रत्येक ngIfIn और ngIfValue, इसलिए मैं अपने निर्देश की जरूरत है इन दो आदानों द्वारा टेम्पलेट हड़पने और प्राप्त करने के लिए उनके मान भी, तो यह इस

@Directive({ 
    selector : '[ngIfIn][ngIfValue]', 
    inputs : ['ngIfIn', 'ngIfValue'] 
}) 

पहले की तरह लग रहे हैं मैं दो वर्गों मैं

01 ऊपर उल्लेख किया इंजेक्षन करने की जरूरत है

मैं भी मान रहा आदानों

_value: any; 
    _obj: any; 

    // Value passed through <template [ngIfValue]="'...'"> 
    set ngIfValue(value: any) { 
    this._value = value; 
    } 

    // Value passed through <template [ngIfIn]="..."> 
    set ngIfIn(obj: any) { 
    this._obj = obj; 
    } 

मेरे मामले में मैं इन दो मूल्यों पर निर्भर के माध्यम से गुजर रहा हूँ कैश करने के लिए की जरूरत है, मैं ngOnInit में मेरा तर्क हो सकता है लेकिन यह है कि एक बार चलाने के लिए और wouldn होगा ' किसी भी इनपुट में बदलावों के लिए सुनो, इसलिए मैंने तर्क ngOnChanges में रखा है। याद रखें कि ngOnChangesडेटा-बाध्य गुणों की जांच के ठीक बाद कहा जाता है और इससे पहले कि उनमें से कम से कम एक (दस्तावेज़ों से कॉपी और पेस्ट) बदल गया है, देखने और सामग्री से पहले बच्चों को चेक किया गया है।

अब मैं मूल रूप से कॉपी & पेस्ट NgIf तर्क (ताकि जटिल नहीं है, लेकिन इसी तरह की)

// ngOnChanges so this gets re-evaluated when one of the inputs change its value 
    ngOnChanges(changes) { 
    if(this._value in this._obj) { 

     // If the condition is true, we embed our template content (TemplateRef) into the view 
     this._vr.createEmbeddedView(this._tr); 
    } else { 

     // If the condition is false we remove the content of the view 
     this._vr.clear(); 
    } 
    } 

आप देख यह है कि जटिल नहीं है के रूप में: ले लो एक TemplateRef, एक ViewContainerRef हड़पने, कुछ तर्क करते हैं और TemplateRef एम्बेड ViewContainerRef का उपयोग करके दृश्य में।

उम्मीद है कि मैंने खुद को स्पष्ट कर दिया है और मैंने उन्हें पर्याप्त रूप से स्पष्ट करने का तरीका भी बनाया है। मैंने उदाहरण के साथ plnkr यहां दिया है।

Answer 2

ngForTemplate केवल ngFor

<template [ngFor] [ngForOf]="..." [ngForTemplate]="container" 

या

<div *ngFor="..." [ngForTemplate]="container" 

एक सादे टेम्पलेट पर

नहीं के साथ समर्थित है। यह NgFor directive

पर एक @Input() एक और तरीका है TemplateRef

उपयोग करने के लिए आप ViewContainerRef के लिए एक संदर्भ है, तो आप इसे करने के लिए "टिकट" टेम्पलेट

constructor(private _viewContainer: ViewContainerRef) { } 

ngOnInit() { 
    this.childView = this._viewContainer.createEmbeddedView(this.templ); 
    this.childView.setLocal('data', this.data); 
}