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

86

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

Я хочу запустить скрипт, когда запущен 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
    }
Крис
источник
после нескольких часов исследования у меня все еще была та же проблема. > Модуль не найден: ошибка: не удается разрешить '@ types / jquery'. Я установил его с помощью npm install --save -D @ types / jquery, а затем, когда я пытаюсь импортировать его в модуль (из-за того, что я получил сообщение от панели инструментов, что он не знает $ из jQuery) в моем Component.ts говорится о моем первом сообщении! Надеюсь, мои объяснения верны. Еще раз спасибо за всю помощь, которую мне оказало сообщество! Кстати: Это мое первое настоящее сообщение, поэтому я надеюсь написать хорошее
Александр

Ответы:

37

Вы можете запустить событие самостоятельно в 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'));
  }
}
Гюнтер Цохбауэр
источник
ОК, отлично. Не могли бы вы привести быстрый пример такого кода? Извините, но я новичок в ng2
Крис
Желательно, чтобы я мог загружать файл js при возникновении onInit. Этот файл содержит весь мой готовый код документа (из шаблона html, который я использую) и находится в js, поэтому я не могу просто скопировать и вставить его, так как я пишу ng2 в .ts
Крис
Проверьте ссылку на ngOnInit.
Борис
1
@Boris, я боюсь, что это меня не очень далеко зайдет
Крис
9
Затем вы просто запускаете код ngAfterViewInit() { ... }. Не нужно запускать событие.
Гюнтер Цохбауэр
64

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

Получил работу:

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
    }
Самир Алибхай
источник
4
Не уверен, почему голоса против. Это сработало для меня, но также привело к гонке между устаревшим кодом JS, который я пытался запустить, и компилятором представления. В итоге я использовал AfterViewChecked, но все же вот голос за то, что указал мне в правильном направлении.
lukiffer 01
1
Это может сработать, но это может быть не лучшая практика. Было бы лучше, если бы весь внешний код был обернут в некоторую глобальную, но хорошо распределенную функцию, а затем вызывать эту функцию из 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.
Златко
1
Я не голосую против этого, но с помощью этого метода я могу обращаться к элементам DOM. Однако, когда я пытаюсь получить element.css ('height'), он возвращает мне 0px, поэтому я не могу использовать его для настройки css.
Blast
У меня это сработало отлично :) Думаю, на данном этапе у вас уже есть DOM, но, возможно, еще не загружены все исходники, например изображения. Так что это точно так $document.ready().
Affilnost
1
Сладко и гладко!
Сэм
17

Я выбрал это решение, поэтому мне не пришлось включать свой собственный 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');
  }
Dynamiclynk
источник
Я получаю, Cannot find name '$'.когда пытаюсь следовать этому примеру?
есть-спать-код
3
@ eat-sleep-code Я думаю, вам нужна типизация jQuery, как насчет того, чтобы попробовать npm install @types/jquery -D? : D
realappie
4

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

Илир Хуши
источник
куда вы это положили?
Дэн Чейз
@DanChase можно разместить после импорта библиотек в класс
Илир Хуши
взгляните на эту прекрасную статью для исключения jquery с использованием angular-cli: medium.com/@swarnakishore/…
Павел
3

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

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

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

phil123456
источник
1
Постарайтесь четко изложить в своем ответе только свое решение, и если вы считаете, что какой-то ответ неверен, подумайте о том, чтобы вместо этого прокомментировать этот вопрос.
Zeeshan Adil
Нет проблем, просто постарайтесь дать более ясный ответ, чтобы помочь большему количеству людей. с минималистичным примером кода.
Zeeshan Adil
0

В вашем файле 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));
});
Викас Кандари
источник