कोणीय 2 चयनकर्ता नेस्टेड घटकों में किसी भी तत्व से मेल नहीं खाता

मेरे पास दो नेस्टेड @Components एन कोणीय 2 है। दृश्य केवल ठीक है लेकिन यह हमेशा पहली बार जावास्क्रिप्ट त्रुटि फेंकता है। टाइपस्क्रिप्ट में मेरा कोड यहां है।कोणीय 2 चयनकर्ता नेस्टेड घटकों में किसी भी तत्व से मेल नहीं खाता

अनुप्रयोग HTML:

<body> 
    <my-app>loading...</my-app> 
</body>

अनुप्रयोग घटक:

import {bootstrap, Component} from 'angular2/angular2'; 
import {CanvasComponent} from "./CanvasComponent"; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{title}}</h1> 
     <h2>My Games</h2> 
     <div> 
     <my-canvas></my-canvas> 
     </div> 
    `, 
    directives: [CanvasComponent] 
}) 

class AppComponent { 
} 

bootstrap(AppComponent);

कैनवास घटक:

import {bootstrap, Component, View} from 'angular2/angular2'; 

@Component({ 
    selector: 'my-canvas' 
}) 

@View({ 
    template: ` 
    <div> 
    <span>Balls:</span> 
    <div>{{canvas.length}}</div> 
    </div> 
    ` 
}) 

export class CanvasComponent { 
    canvas = [1,2,3]; 
} 

bootstrap(CanvasComponent);

त्रुटि है:

EXCEPTION: The selector "my-canvas" did not match any elements

स्रोत

2015-10-23 fos.alex

को अपने CanvasComponent फ़ाइल से हटाएं। यह रूट के रूप में CanvasComponent का उपयोग करके दूसरी बार बूटस्ट्रैप एप्लिकेशन को आजमाने की कोशिश कर रहा है और आपके ऐप एचटीएमएल में my-canvas तत्व ढूंढ रहा है। बेशक यह नहीं मिल रहा है।

स्रोत

2015-10-23 22:23:55 alexpods

ठीक है, अब मान लें कि '' CanvasComponent' HTTP_PROVIDERS' और अन्य सेवाओं की आवश्यकता है। आप इसे कैसे इंजेक्ट करेंगे? मुझे लगता है कि रूट घटक को इन सेवाओं को इंजेक्शन देने की परवाह करनी चाहिए। – Pablo

@ पाब्लो, बस इसे अपने ऐप 'बूटस्ट्रैप (ऐपकंपोनेंट, [HTTP_PROVIDERS]) के लिए बूटस्ट्रैप कॉल में जोड़ें;' फिर कैनवास कॉम्पोनेंट में एक कन्स्ट्रक्टर जोड़ें जिसमें आपको 'इंजेक्ट' के साथ एनोटेटेड की आवश्यकता है, उदाहरण के लिए: 'कन्स्ट्रक्टर (@ इंजेक्ट (एचटीपी) सार्वजनिक http: एचटीपी) {} ' – svallory

@ स्वेल्लरी धन्यवाद, मैंने @ कॉम्पोनेंट के अंदर 'प्रदाताओं' संपत्ति का उपयोग करके DI को पूरा किया है। Https://github.com/ghpabs/angular2-seed-project/blob/master/src/scripts/todo/todo.component.ts#L12-L17 देखें। इस तरह से मुझे लगता है कि घटक बेहतर encapsulated है। विचार? – Pablo

मैंने index.html में नाम बदलकर इस मुद्दे को ठीक किया है, आपको यह सुनिश्चित करना चाहिए कि index.html में टैग वही चयनकर्ता है जो मुख्य घटक में है।

<html> 
     <head> 
     <title>Angular 2 QuickStart</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="stylesheets/styles.css"> 
     <!-- 1. Load libraries --> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/reflect-metadata/Reflect.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <!-- 2. Configure SystemJS --> 
     <script src="systemjs.config.js"></script> 
     <script> 
     System.import('app').catch(function(err){ console.error(err); }); 
     </script> 
     </head> 
     <!-- 3. Display the application --> 

     <body> 
     <my-app>Loading...</my-app> <!-- THIS TAG SHOULD BE THE SAME THAT THE SELECTOR IN THE MAIN COMPONENT --> 
     </body> 
    </html> 

<!-- end snippet --> 

    </body> 
</html>

स्रोत

2016-09-27 21:55:45

कोणीय 2 चयनकर्ता नेस्टेड घटकों में किसी भी तत्व से मेल नहीं खाता

उत्तर

संबंधित मुद्दे