प्रस्तुत नहीं किया गया है मुझे अंगुलरजेएस में अनुभव है और मैं कोणीय 2 सीखना शुरू कर रहा हूं। मैं अपनी सीखने की यात्रा की शुरुआत में हूं, लेकिन मैं पहले से ही अटक गया हूं।कोणीय 2 घटक
मैं अपने घटकों में से एक को प्रस्तुत करने के लिए प्राप्त कर सकता हूं, लेकिन दूसरा नहीं। मैं विजुअल स्टूडियो 2013 अल्टीमेट और टाइपस्क्रिप्ट 1.5 बीटा का उपयोग कर रहा हूं। यहाँ स्रोत है:
index.html
<html>
<head>
<title>Angular 2 Quickstart</title>
<script src="https://github.jspm.io/jmcriffey/[email protected]/traceur-runtime.js"></script>
<script src="https://jspm.io/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.28/angular2.dev.js"></script>
</head>
<body>
<!-- The app component created in app.ts -->
<my-app></my-app>
<display></display>
<script>
System.import('app');
System.import('displ');
</script>
</body>
</html>
app.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'my-app',
})
@View({
template: '<h1>Hello {{ name }}</h1>',
})
// Component controller
export class MyAppComponent {
name: string;
constructor() {
this.name = 'Alice';
}
}
bootstrap(MyAppComponent);
displ.ts
/// <reference path="d:/npm/typings/angular2/angular2.d.ts" />
import { Component, View, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'display'
})
@View({
template: '<h1>xxxHello {{ name }}</h1>',
})
// Component controller
export class DisplayComponent {
name: string;
constructor() {
this.name = 'Bob';
}
}
गु ई परिणाम बस है:
हैलो ऐलिस
कहाँ बॉब चली गई?
धन्यवाद!
अद्यतन
मुझे लगता है कि मैं इसे गलत तरीके से करने के लिए कोशिश कर रहा था। मेरा इरादा display घटक my-app घटक के अंदर नेस्टेड के लिए था, लेकिन my-app के टेम्पलेट आवश्यक सामग्री शामिल नहीं किया था:
- यह एक
<display></display>तत्व शामिल नहीं किया। इसकी बजाय शीर्ष स्तरindex.htmlमें शामिल किया गया था जो इसके लिए गलत जगह थी। - व्यू एनोटेशन में डिस्प्ले घटक को निर्देश संदर्भ के रूप में शामिल नहीं किया गया था।
संक्षेप में, मैं क्या पड़ा है चाहिए था:
app.ts (देखें एनोटेशन)
@View({
template: '<h1>Hello {{ name }}</h1><display></display>',
directives: [DisplayComponent]
})
और यह भी मैं app.ts में अपने प्रदर्शन घटक आयात करने के लिए किया था:
import { DisplayComponent } from 'displ';
'बूटस्ट्रैप (डिस्प्ले कॉम्पोनेंट);'? – nada
@nada प्रत्येक घटक को बूटस्ट्रैप करना आवश्यक है? –
आमतौर पर हमें रूट घटक को बूटस्ट्रैप करने की आवश्यकता होती है, और हम इसके अंदर अन्य घटकों को निर्देश के रूप में शामिल करते हैं। यह हमें केवल रूट को बूटस्ट्रैप करना है। यदि आप दो घटकों को अलग-अलग बूटस्ट्रैप करते हैं तो वे दो अलग कोणीय 2 अनुप्रयोग –