在Angular2相当于$的document.ready运行脚本（） [英] Run script on Angular2 equivalent of $document.ready()

问题描述

简单的问题，我希望。

我要当Angular2相当于$的document.ready（）被触发运行脚本。什么是实现这一目标的最佳途径？

我试过把脚本在年底的index.html ，但我发现，这也不行！我认为它在某种组件声明的去？

是否有可能运行加载脚本的.js 文件？

编辑 - code：

我有以下js和css插件注入到我的应用程序（从的铸造HTML主题）。

 ＆LT;链接HREF =CSS / themify-icons.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / bootstrap.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / flexslider.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / lightbox.min.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / ytplayer.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / theme.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;链接HREF =CSS / custom.css的rel =stylesheet属性类型=文/ CSS媒体=所有/＆GT;
    ＆LT;脚本SRC =JS / jquery.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / bootstrap.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / flexslider.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / lightbox.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / masonry.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / twitterfetcher.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / spectragram.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / ytplayer.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / countdown.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS /平滑scroll.min.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / parallax.js＆GT;＆LT; / SCRIPT＆GT;
    ＆LT;脚本SRC =JS / scripts.js中＆GT;＆LT; / SCRIPT＆GT; //这将启动所有的插件
 

如前所述，需要后角已准备好运行scripts.js中实例化整个事情，因此。 的script.js

得到它的工作：

 进口{组件，AfterViewInit}从'angular2 /核心;@零件（{
  选择：'家'，
  templateUrl：./components/home/home.html
}）
出口类HomeCmp实现AfterViewInit {
    ngAfterViewInit（）{
       //从的script.js所有的JS code复制。打字稿会抱怨，但它工作得很好
    }
 

解决方案

您可以在 ngOnInit激发自己的事件（）您的角根组件，然后侦听此事件的角度之外。

这是飞镖code（我不知道打字稿），但should't是很难翻译

  @Component（选择：应用程序元素）
@视图（
    templateUrl：app_element.html'，
）
类AppElement实现的OnInit {
  ElementRef elementRef;
  AppElement（this.elementRef）;  无效ngOnInit（）{
    DOM.dispatchEvent（elementRef.nativeElement，新的自定义事件（'角就绪'））;
  }
}
 

Simple question, I hope.

I want to run a script when the Angular2 equivalent of $document.ready() is fired. What is the best way to achieve this?

I've tried putting the script at the end of index.html, but as I found out, this doesn't work! I take it that it has to go in some kind of component declaration?

Is it possible to run load the script from a .js file?

EDIT - Code:

I've got the following js and css plugins injected into my application (from the Foundry html theme).

    <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" />
    <link href="css/flexslider.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/lightbox.min.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/ytplayer.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/custom.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/lightbox.min.js"></script>
    <script src="js/masonry.min.js"></script>
    <script src="js/twitterfetcher.min.js"></script>
    <script src="js/spectragram.min.js"></script>
    <script src="js/ytplayer.min.js"></script>
    <script src="js/countdown.min.js"></script>
    <script src="js/smooth-scroll.min.js"></script>
    <script src="js/parallax.js"></script>
    <script src="js/scripts.js"></script> //This initiates all the plugins

As noted, the scripts.js 'instantiates' the whole thing, and thus is needed to be run after Angular is ready. script.js

Got it working:

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
    }

解决方案

You can fire an event yourself in ngOnInit() of your Angular root component and then listen for this event outside of Angular.

This is Dart code (I don't know TypeScript) but should't be to hard to translate

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

这篇关于在Angular2相当于$的document.ready运行脚本（）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！