Pomoc w programowaniu, odpowiedzi na pytania / Kątowy / Jak uruchomić kod TypeScript w Angular2 po wyrenderowaniu wszystkich komponentów? - kątowy, maszynopis

Jak uruchomić kod TypeScript w Angular2 po wyrenderowaniu wszystkich komponentów? - kątowy, maszynopis

Stworzyłem 2 proste komponenty w mojej aplikacji angular2 o nazwie IndexPageComponent i 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() {
}
}

Oba komponenty są używane w tym komponencie:

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() {
}
}

Mój HTML wygląda następująco:

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

Używam również innej struktury interfejsu użytkownika (o nazwie Framework7), która musi zostać zainicjowana po wszystkie komponenty, jak również DOM, są gotowe.

Do inicjalizacji należy uruchomić następujący kod:

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

Niestety, muszę poczekać z tym, aż wszystkie komponenty i DOM będą gotowe. Gdzie umieścić ten kod w projekcie Angular2 + TypeScript?

Próbowałem umieścić go we własnym pliku .ts i uruchomić go:

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);

Ale to nie działa, ponieważ jest wcześnie wywołane (komponenty Angular2 i DOM nie są jeszcze gotowe i gotowe).

Działa tylko wtedy, gdy zawijam połączenie fw7App.addView(...) do limitu czasu, ale nie może to być rozwiązaniem.

Odpowiedzi:

1 dla odpowiedzi № 1

Musisz umieścić ten kod w metodzie elementu rodzica ngAfterViewChecked (). Przeczytaj o hakach cyklu życia komponentu: https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html#!#afterview