प्रोग्रामिंग, सवालों के जवाब में मदद करें / कोणीय / सभी घटकों के प्रतिपादन के बाद Angular2 में टाइपस्क्रिप्ट कोड कैसे चलाएं? - कोणीय, टाइपस्क्रिप्ट

सभी घटकों को प्रस्तुत करने के बाद Angular2 में टाइपस्क्रिप्ट कोड कैसे चलाएं? - कोणीय, टाइपस्क्रिप्ट

मैंने अपने angular2 ऐप में 2 सरल घटक बनाये हैं जिन्हें IndexPageComponent और DetailPageComponent कहा जाता है:

IndexPageComponent

import { Component } from "angular2/core";

@Component({
selector: "indexpage",
template: `
<div data-page="index" class="page">
</div>
`
})

export default class IndexPageComponent {

constructor() {
}
}

DetailPageComponent

import { Component } from "angular2/core";

@Component({
selector: "detailpage",
template: `
<div data-page="detail" class="page cached">
</div>
`
})

export default class DetailPageComponent {

constructor() {
}
}

इस घटक में दोनों घटकों का उपयोग किया जाता है:

MainViewComponent

import { Component } from "angular2/core";
import IndexPageComponent from "./IndexPageComponent";
import DetailPageComponent from "./DetailPageComponent";

@Component({
selector: "main-view",
template: `
<div class="pages">
<indexpage></indexpage>
<detailpage></detailpage>
</div>
`,
directives: [IndexPageComponent, DetailPageComponent]
})

export default class MainViewComponent {

constructor() {
}
}

मेरा एचटीएमएल इस तरह दिखता है:

  <body>
<div class="views">
<main-view class="view view-main"></main-view>
</div>
</body>

मैं एक और यूआई फ्रेमवर्क (जिसे फ्रेमवर्क 7 भी कहा जाता है) का उपयोग करता हूं, जिसे शुरू करने की आवश्यकता है बाद सभी घटक और साथ ही डोम तैयार है।

आरंभीकरण के लिए मुझे निम्नलिखित कोड चलाना होगा:

var fw7App = new Framework7();
var fw7MainView = fw7App.addView(".view-main", {
domCache: true //enable inline pages
});

दुर्भाग्य से, मुझे इसके साथ प्रतीक्षा करने की आवश्यकता है जब तक कि सभी घटक और DOM तैयार न हों। इस कोड को मैं Angular2 + टाइपस्क्रिप्ट प्रोजेक्ट में कहां डालूं?

मैंने इसे अपने .ts फ़ाइल में डालने और इसे चलाने का प्रयास किया:

import "framework7"
import { bootstrap } from "angular2/platform/browser";
import MainViewComponent from "./MainViewComponent";

var fw7App = new Framework7();
var fw7MainView = fw7App.addView(".view-main", {
domCache: true //enable inline pages
});

bootstrap(MainViewComponent);

लेकिन यह काम नहीं करता है क्योंकि इसे जल्दी बुलाया गया है (Angular2 घटक और DOM aren "t प्रदान और अभी तक तैयार)

यह तभी काम करता है जब मैं कॉल को लपेटता हूं fw7App.addView(...) समयबाह्य में लेकिन यह "समाधान नहीं हो सकता है।"

उत्तर:

उत्तर № 1 के लिए 1

आपको उस कोड को माता-पिता के घटक विधि ngAfterViewChecked () में रखना होगा। घटक जीवन चक्र हुक के बारे में यहां पढ़ें: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview