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

Простой вопрос, надеюсь.

Я хочу запустить script, когда выполняется Angular2 эквивалент $document.ready(). Каков наилучший способ достичь этого?

Я попытался поместить script в конец index.html, но, как я узнал, это не сработает! Я полагаю, что это должно быть в какой-то декларации компонента?

Возможно ли запустить загрузку script из файла .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
    }

Ответы

Ответ 1

Вы можете запустить событие в ngOnInit() вашего корневого компонента Angular, а затем прослушать это событие вне Angular.

Это код Дарта (я не знаю 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'));
  }
}

Ответ 2

Копирование ответа от Криса:

Сработало:

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
    }

Ответ 3

Я пошел с этим решением, поэтому мне не пришлось включать свой пользовательский 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 lifecycle работало лучше, потому что оно предотвращало загрузку script после загрузки представлений, что было в случае с ngAfterViewInit, и это заставляет представление показывать неправильные позиции элементов до загрузки script.

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

Ответ 4

Чтобы использовать jQuery внутри Angular, объявите только $следующим образом: объявить var $: any;

Ответ 5

принятый ответ не является правильным, и нет смысла принимать его, учитывая вопрос

ngAfterViewInit сработает, когда DOM будет готов

whine ngOnInit сработает, когда компонент страницы только начинает создаваться

Ответ 6

В вашем файле main.ts начальная загрузка после 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));
});