Angular2 еквівалент $ document.ready ()

Сподіваюся, просте запитання.

Я хочу запустити сценарій, коли запускається еквівалент Angular2 $ document.ready (). Який найкращий спосіб цього досягти?

Я спробував поставити сценарій наприкінці index.html, але, як я дізнався, це не працює! Я вважаю, що він повинен входити в якусь декларацію компонента?

Чи можна запустити завантаження сценарію з .jsфайлу?

EDIT - Код:

У моє додаток введені такі плагіни js та css (з теми Foundry html ).

    <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

Як зазначалося, scripts.js `` створює екземпляр '' цілого, і тому його потрібно запускати після того, як Angular буде готовий. script.js

Зрозуміло:

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
    }

Ви можете запустити подію самостійно у ngOnInit()своєму кореневому компоненті Angular, а потім прослухати цю подію за межами Angular.

Це код Dart (я не знаю TypeScript), але перекладати його важко

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

Копіюючи відповідь від Кріса:

Зрозуміло:

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
    }

Я пішов із цим рішенням, тому мені не довелося включати свій власний код js до компонента, крім функції jQuery $ .getScript .

Примітка: Має залежність від jQuery. Тож вам знадобляться типізація jQuery та jQuery.

Я виявив, що це хороший спосіб обійти користувацькі файли js або постачальника, які не мають доступних типів, так що TypeScript не кричить на вас, коли ви заходите запускати програму.

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

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

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

Оновити Насправді в моєму сценарії подія життєвого циклу OnInit працювала краще, оскільки вона перешкоджала завантаженню сценарію після завантаження подань, як це було у випадку з ngAfterViewInit, і в результаті подання відображало неправильні позиції елементів до завантаження сценарію.

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

Для того, щоб використовувати jQuery всередині Angular, оголосіть $ наступним чином: оголосіть var $: any;

прийнята відповідь не є правильною, і не має сенсу приймати її, розглядаючи питання

ngAfterViewInit спрацює, коли DOM буде готовий

whine ngOnInit спрацює, коли компонент сторінки тільки починає створюватися

У вашому файлі main.ts bootstrap після DOMContentLoaded так що angular завантажиться, коли DOM буде повністю завантажений.

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