Odpowiednik $ document.ready () w Angular2

Mam nadzieję, że proste pytanie.

Chcę uruchomić skrypt, gdy zostanie uruchomiony odpowiednik $ document.ready () w Angular2. Jaki jest najlepszy sposób, aby to osiągnąć?

Próbowałem umieścić skrypt na końcu index.html, ale jak się dowiedziałem, to nie działa! Rozumiem, że musi iść w jakiejś deklaracji komponentu?

Czy można uruchomić ładowanie skryptu z .jspliku?

EDYCJA - Kod:

Mam następujące wtyczki js i css wstrzyknięte do mojej aplikacji (z motywu 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

Jak już wspomniano, skrypt scripts.js `` tworzy instancję '' całej rzeczy i dlatego należy go uruchomić, gdy Angular będzie gotowy. script.js

Działa:

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
    }

Możesz samodzielnie uruchomić zdarzenie w ngOnInit()komponencie głównym Angular, a następnie nasłuchiwać tego zdarzenia poza Angular.

To jest kod Darta (nie znam TypeScript), ale nie powinien być trudny do przetłumaczenia

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

Kopiowanie odpowiedzi od Chrisa:

Działa:

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
    }

Wybrałem to rozwiązanie, więc nie musiałem włączać mojego niestandardowego kodu js do komponentu innego niż funkcja jQuery $ .getScript .

Uwaga: ma zależność od jQuery. Będziesz więc potrzebował typów jQuery i jQuery.

Zauważyłem, że jest to dobry sposób na obejście niestandardowych lub dostawców plików js, które nie mają dostępnych typów, dzięki czemu TypeScript nie krzyczy na ciebie, gdy idziesz, aby uruchomić aplikację.

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

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

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

Aktualizacja Właściwie w moim scenariuszu zdarzenie cyklu życia OnInit działało lepiej, ponieważ uniemożliwiło załadowanie skryptu po załadowaniu widoków, co miało miejsce w przypadku ngAfterViewInit, i spowodowało, że widok pokazywał nieprawidłowe pozycje elementu przed załadowaniem skryptu.

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

Aby użyć jQuery wewnątrz Angulara, zadeklaruj tylko $ w następujący sposób: deklaruj var $: any;

przyjęta odpowiedź nie jest poprawna i biorąc pod uwagę pytanie, nie ma sensu jej akceptować

ngAfterViewInit uruchomi się, gdy DOM będzie gotowy

whine ngOnInit uruchomi się, gdy komponent strony dopiero zaczyna być tworzony

W pliku main.ts bootstrap po DOMContentLoaded, więc angular zostanie załadowany, gdy DOM jest w pełni załadowany.

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