एक कोणीय 2 जावास्क्रिप्ट ES5 घटक

Question

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

मैं एक कैनवास घटक बनाना चाहता हूं, जहां मैं एक बाध्य संपत्ति के आधार पर डेटा खींचता हूं। मैं जावास्क्रिप्ट का उपयोग कर Angular2 में यह कैसे कर सकता हूं?

कोणीय 1 के साथ मेरा दृष्टिकोण निर्देश में तत्व संदर्भ प्राप्त करना होगा, लेकिन मुझे यह नहीं पता कि यह अब कैसे किया जाना चाहिए।

यहाँ एक दृष्टिकोण है जो काम करने के लिए लगता है, लेकिन मैं ऐसा करने के बाद मेरे हाथ धोने की तरह महसूस:

(function (app) { 
    app.DrawingComponent = ng.core 
     .Component({ 
      selector: 'my-drawing', 
      template: '<div><canvas id="{{randomId}}"></canvas></div>' 
     }) 
     .Class({ 
      constructor: function() { 
       this.randomId = "canvas" + Math.random(); 
      }, 
      ngAfterViewInit: function() { 
       var canvas = document.getElementById(this.randomId); 
       console.log(canvas); 
      } 
     }); 
})(window.app || (window.app = {})); 

Answer 1

टीएस solution मैं संदर्भित के बीच फर्क सिर्फ इतना है, और जिस तरह से आप ES5 ViewChild

फोन टीएस के साथ ES5 में सीधे एनोटेशन @ViewChild, उपयोग कर सकते हैं आप घटक

में queries पैरामीटर का उपयोग करने के लिए है है

app.DrawingComponent = ng.core 
    .Component({ 
     selector: 'my-drawing', 
     template: '<div><canvas #myCanvas></canvas></div>', 

     // Check here! This is important! 
     queries : { 
      myCanvas : new ng.core.ViewChild('myCanvas') 
     } 
    }) 
    .Class({ 
     constructor: function() {}, 
     ngAfterViewInit: function() { 
      console.log(this.myCanvas); 
     } 
    }); 

यहां plnkr उपयोग का प्रदर्शन करता है। एक और answer है जो इसके उपयोग को थोड़ा और समझने में आपकी सहायता कर सकता है।

Answer 2

मुझे यकीन है कि क्या गैर टाइपप्रति वाक्य रचना है नहीं कर रहा हूँ, लेकिन मैं आपको यकीन है कि खुद को जानते हो

यह मैं इसे कैसे किया है है:

export class Navigation { 

    constructor(elementRef: ElementRef) { 
     // elementRef.nativeElement is the actual element 
    } 
} 

Answer 3

तत्व

template: '<div><canvas #canvas id="{{randomId}}"></canvas></div>' 

उपयोग @ViewChild एनोटेशन के लिए एक टेम्पलेट चर ('#canvas') जोड़े

@ViewChild('canvas') canvas; 

AfterViewInit लागू करें और ngAfterViewInit() के बादकहा गया था 210 फ़ील्ड को ElementRef के साथ शुरू किया गया है। canvas.nativeElement के साथ आप <canvas> तत्व तक पहुंच सकते हैं।