Angular2-Äquivalent von $ document.ready ()

Einfache Frage, hoffe ich.

Ich möchte ein Skript ausführen, wenn das Angular2-Äquivalent von $ document.ready () ausgelöst wird. Was ist der beste Weg, um dies zu erreichen?

Ich habe versucht, das Skript am Ende von zu setzen index.html, aber wie ich herausgefunden habe, funktioniert das nicht! Ich nehme an, dass es in einer Art Komponentendeklaration gehen muss?

Ist es möglich, das Skript aus einer .jsDatei zu laden ?

EDIT - Code:

Ich habe die folgenden JS- und CSS-Plugins in meine Anwendung eingefügt (aus dem Foundry-HTML-Thema ).

    <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

Wie bereits erwähnt, "instanziiert" die Datei "scripts.js" das Ganze und muss daher ausgeführt werden, nachdem Angular bereit ist. script.js

Habe es geschafft:

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
    }

Sie können ein Ereignis selbst in ngOnInit()Ihrer Angular-Stammkomponente auslösen und dann außerhalb von Angular auf dieses Ereignis warten.

Dies ist Dart-Code (ich kenne TypeScript nicht), sollte aber nicht zu schwer zu übersetzen sein

@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'));
  }
}

Kopieren der Antwort von Chris:

Habe es geschafft:

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
    }

Ich habe mich für diese Lösung entschieden, damit ich meinen benutzerdefinierten js-Code nicht in die andere Komponente als die Funktion jQuery $ .getScript aufnehmen musste .

Hinweis: Hat eine Abhängigkeit von jQuery. Sie benötigen also jQuery- und jQuery-Typisierungen.

Ich habe festgestellt, dass dies ein guter Weg ist, um benutzerdefinierte oder Hersteller-JS-Dateien zu umgehen, für die keine Typisierungen verfügbar sind. TypeScript schreit Sie nicht an, wenn Sie Ihre App starten.

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

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

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

Aktualisieren In meinem Szenario funktionierte das OnInit-Lebenszyklusereignis tatsächlich besser, da das Laden des Skripts nach dem Laden der Ansichten verhindert wurde, was bei ngAfterViewInit der Fall war und die Ansicht vor dem Laden des Skripts falsche Elementpositionen anzeigt.

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

Um jQuery in Angular zu verwenden, deklarieren Sie $ nur wie folgt: deklarieren Sie var $: any;

Die akzeptierte Antwort ist nicht korrekt und es macht keinen Sinn, sie unter Berücksichtigung der Frage zu akzeptieren

ngAfterViewInit wird ausgelöst, wenn das DOM bereit ist

whine ngOnInit wird ausgelöst, wenn die Seitenkomponente erst erstellt wird

In Ihrer main.ts- Datei wird Bootstrap nach DOMContentLoaded so eckig geladen, wenn DOM vollständig geladen ist.

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