Angular2 équivalent de $ document.ready ()

Question simple, j'espère.

Je veux exécuter un script lorsque l'équivalent Angular2 de $ document.ready () est déclenché. Quelle est la meilleure façon d'y parvenir?

J'ai essayé de mettre le script à la fin de index.html, mais comme je l'ai découvert, cela ne fonctionne pas! Je suppose qu'il doit entrer dans une sorte de déclaration de composant?

Est-il possible d'exécuter le chargement du script à partir d'un .jsfichier?

EDIT - Code:

J'ai les plugins js et css suivants injectés dans mon application (à partir du thème html Foundry ).

    <link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    ...


    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/flexslider.min.js"></script>
    ...
    <script src="js/scripts.js"></script> //This initiates all the plugins

Comme indiqué, le script.js «instancie» le tout, et doit donc être exécuté une fois Angular prêt. script.js

Ça marche:

import {Component, AfterViewInit} from 'angular2/core';

@Component({
  selector: 'home',
  templateUrl: './components/home/home.html'
})
export class HomeCmp implements AfterViewInit {


    ngAfterViewInit() {
       //Copy in all the js code from the script.js. Typescript will complain but it works just fine
    }

Vous pouvez déclencher un événement vous-même dans ngOnInit()votre composant racine Angular, puis écouter cet événement en dehors d'Angular.

Ceci est du code Dart (je ne connais pas TypeScript) mais ne devrait pas être trop difficile à traduire

@Component(selector: 'app-element')
@View(
    templateUrl: 'app_element.html',
)
class AppElement implements OnInit {
  ElementRef elementRef;
  AppElement(this.elementRef);

  void ngOnInit() {
    DOM.dispatchEvent(elementRef.nativeElement, new CustomEvent('angular-ready'));
  }
}

Copie de la réponse de Chris:

Ça marche:

import {AfterViewInit} from 'angular2/core';    

export class HomeCmp implements AfterViewInit {    

    ngAfterViewInit() {
       //Copy in all the js code from the script.js. Typescript will complain but it works just fine
    }

J'ai choisi cette solution pour ne pas avoir à inclure mon code js personnalisé dans le composant autre que la fonction jQuery $ .getScript .

Remarque: a une dépendance sur jQuery. Vous aurez donc besoin des typages jQuery et jQuery.

J'ai trouvé que c'est un bon moyen de contourner les fichiers js personnalisés ou du fournisseur qui n'ont pas de typages disponibles de cette façon TypeScript ne vous crie pas lorsque vous démarrez votre application.

import { Component,AfterViewInit} from '@angular/core'

@Component({
  selector: 'ssContent',
  templateUrl: 'app/content/content.html',
})
export class ContentComponent implements AfterViewInit  {

  ngAfterViewInit(){
    $.getScript('../js/myjsfile.js');
  }
}

Mettre à jour En fait, dans mon scénario, l'événement du cycle de vie OnInit fonctionnait mieux car il empêchait le script de se charger après le chargement des vues, ce qui était le cas avec ngAfterViewInit, et cela faisait que la vue affiche des positions d'élément incorrectes avant le chargement du script.

ngOnInit() {
    $.getScript('../js/mimity.js');
  }

Pour utiliser jQuery dans Angular, déclarez uniquement le $ comme suit: declare var $: any;

la réponse acceptée n'est pas correcte et cela n'a aucun sens de l'accepter compte tenu de la question

ngAfterViewInit se déclenchera lorsque le DOM sera prêt

whine ngOnInit se déclenchera lorsque le composant de page commence à peine à être créé

Dans votre fichier main.ts , bootstrap après DOMContentLoaded afin que angular se charge lorsque DOM est complètement chargé.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}



document.addEventListener('DOMContentLoaded', () => {
  platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
});