blocks|key|2887470|text|您可以自己在Angular根组件的ngOnInit()中激发一个事件，然后在Angular外部侦听此事件。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2887471|这是Dart代码(我不知道TypeScript)，但应该不难翻译|2887472|@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'));
++}
}|code-block|syntax|javascript|2887473|entityMap^0|H|A|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

You can fire an event yourself in <code>ngOnInit()</code> 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

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

blocks|key|123106|text|从Chris那里复制答案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|123107|让它工作了：|offset|length|style|BOLD|123108|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
++++}|code-block|syntax|javascript|123109|entityMap^0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Copying the answer from Chris:

Got it working:

<pre><code>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
 }
</code></pre>

blocks|key|121236|text|我采用了这个解决方案，因此除了jQuery+$.getScript函数之外，我不必在组件中包含我的自定义js代码。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|121237|121238|注意:依赖于jQuery。因此，您将需要jQuery和jQuery类型。|blockquote|121239|121240|121241|我发现这是绕过自定义或供应商js文件的一个好方法，这样当你启动你的应用程序时，TypeScript就不会对你尖叫。|121242|import+{+Component,AfterViewInit}+from+'@angular/core'

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

++ngAfterViewInit(){
++++$.getScript('../js/myjsfile.js');
++}
}|code-block|syntax|javascript|121243|更新实际上在我的场景中，OnInit生命周期事件工作得更好，因为它阻止了在加载视图之后加载脚本(+ngAfterViewInit就是这种情况)，并且导致视图在脚本加载之前显示不正确的元素位置。|121244|ngOnInit()+{
++++$.getScript('../js/mimity.js');
++}|121245|entityMap^0|M|B|0|0|0|0|0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|11|8|@]|D|@]|E|$]]|$1|G|3|H|5|I|7|12|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|13|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|14|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|15|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|16|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|U|3|V|5|P|7|1A|8|@]|D|@]|E|$Q|R]]|$1|W|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|X|$]]

I went with this solution so I didn't have to include my custom js code within the component other than the jQuery $.getScript function. 

<blockquote>
 Note: Has a dependency on jQuery. So you will need jQuery and jQuery typings.
</blockquote>

I have found this is a good way to get around custom or vendor js files that do not have typings available that way TypeScript doesn't scream at you when you go to start your app.

<pre><code>import { Component,AfterViewInit} from '@angular/core'

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

 ngAfterViewInit(){
 $.getScript('../js/myjsfile.js');
 }
}
</code></pre>

Update
Actually in my scenario the OnInit lifecycle event worked better because it prevented the script from loading after the views were loaded, which was the case with ngAfterViewInit, and that cause the view to show incorrect element positions prior to the script loading.

<pre><code>ngOnInit() {
 $.getScript('../js/mimity.js');
 }
</code></pre>

blocks|key|120533|text|为了在Angular中使用jQuery，只需声明$，如下所示：声明var+$：any;|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|120534|entityMap^0|V|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

In order to use jQuery inside Angular only declare the $ as following: 
declare var $: any;

blocks|key|120559|text|被接受的答案是不正确的，考虑到这个问题，接受它是没有意义的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|120560|ngAfterViewInit将在DOM就绪时触发|120561|whine+ngOnInit将在页面组件刚开始创建时触发|120562|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

the accepted answer is not correct, and it makes no sens to accept it considering the question

ngAfterViewInit will trigger when the DOM is ready

whine ngOnInit will trigger when the page component is only starting to be created

blocks|key|2676282|text|在你的main.ts文件中，在DOMContentLoaded之后启动，这样当DOM完全加载时，angular就会加载。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2676283|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));
});|code-block|syntax|javascript|2676284|entityMap^0|3|7|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

In your main.ts file bootstrap after DOMContentLoaded so angular will load when DOM is fully loaded.

<pre><code>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', () =&gt; {
 platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err =&gt; console.log(err));
});
</code></pre>

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 <code>index.html</code>, 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 <code>.js</code> file?

EDIT - Code:

I've got the following js and css plugins injected into my application (from the <a href="http://themeforest.net/item/foundry-multipurpose-html-variant-page-builder/11562108">Foundry html theme</a>).

<pre><code> &lt;link href="css/themify-icons.css" rel="stylesheet" type="text/css" media="all" /&gt;
 &lt;link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" /&gt;
 ...


 &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
 &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
 &lt;script src="js/flexslider.min.js"&gt;&lt;/script&gt;
 ...
 &lt;script src="js/scripts.js"&gt;&lt;/script&gt; //This initiates all the plugins
</code></pre>

As noted, the scripts.js 'instantiates' the whole thing, and thus is needed to be run after Angular is ready. <a href="https://plnkr.co/edit/fp3I6kJu15aGbxMValu3?p=catalogue">script.js</a>

Got it working:

<pre><code>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
 }
</code></pre>

Angular2 equivalent of $document.ready()

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我希望是个简单的问题。我希望在触发$document.ready()的Angular2等效项时运行脚本。实现这一目标的最佳方法是什么？我试着将脚本放在index.html的末尾，但我发现这不起作用！我认为它必须放在某种组件声明中？是否可以从.js文件中运行加载脚本？编辑-代码：我已经将以下js和css插件注入到我的应用...

问$document.ready()的Angular2等效项
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$document.ready()的Angular2等效项EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问$document.ready()的Angular2等效项
EN