Надеюсь, простой вопрос.
Я хочу запустить скрипт, когда запущен Angular2-эквивалент $ document.ready (). Как лучше всего этого добиться?
Я пробовал поставить скрипт в конец index.html
, но, как выяснил, не работает! Я так понимаю, это должно быть в каком-то объявлении компонента?
Можно ли запустить загрузку скрипта из .js
файла?
РЕДАКТИРОВАТЬ - Код:
В мое приложение были внедрены следующие плагины 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), но его нетрудно перевести
источник
ngAfterViewInit() { ... }
. Не нужно запускать событие.Копирование ответа Криса:
Получил работу:
источник
AfterViewChecked
, но все же вот голос за то, что указал мне в правильном направлении.ngAfterViewInit()
. Напрwindow.MY_APP = {}; MY_APP.init = function () {/*copy all that script.js here*/ }
. Затем в вашем компоненте,import ...; declare var MY_APP: any; class HomeComponent() { ngAfterViewInit() { MY_APP.init(); } }
но суть в том, что у вас нет приложения angular2 - ваш script.js в основном представляет собой страницу jquery старой школы. Вы можете превратить большую часть этого в компоненты NG2.$document.ready()
.Я выбрал это решение, поэтому мне не пришлось включать свой собственный js-код в компонент, кроме функции jQuery $ .getScript .
Я обнаружил, что это хороший способ обойти пользовательские или сторонние js-файлы, для которых не предусмотрена типизация, таким образом, TypeScript не кричит на вас, когда вы запускаете свое приложение.
Обновление На самом деле в моем сценарии событие жизненного цикла OnInit работало лучше, потому что оно предотвращало загрузку скрипта после загрузки представлений, как это было в случае с ngAfterViewInit, и это заставляло представление отображать неправильные позиции элементов до загрузки сценария.
источник
Cannot find name '$'.
когда пытаюсь следовать этому примеру?npm install @types/jquery -D
? : DЧтобы использовать jQuery внутри Angular, только объявите $ следующим образом: declare var $: any;
источник
принятый ответ неверен, и нет смысла принимать его, учитывая вопрос
ngAfterViewInit сработает, когда DOM будет готов
whine ngOnInit сработает, когда компонент страницы только начинает создаваться
источник
В вашем файле main.ts после загрузки DOMContentLoaded, поэтому angular загрузится, когда DOM полностью загружен.
источник