相当于$ document.ready（）的Angular2

我希望这是一个简单的问题。

我要在等效于$ document.ready（）的Angular2上运行脚本。实现此目标的最佳方法是什么？

我尝试将脚本放在的末尾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），但翻译起来不难

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

复制克里斯的答案：

得到它的工作：

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
    }

我采用了这种解决方案，因此除了jQuery $ .getScript函数之外，我不必在组件中包含我的自定义js代码。

注意：对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');
  }

为了在Angular中使用jQuery，只需要声明$，如下所示： define var $：any;

接受的答案不正确，考虑到这个问题，接受它没有任何意义。

ngAfterViewInit将在DOM准备就绪时触发

当ngOnInit将在页面组件开始创建时触发

在DOMContentLoaded之后在main.ts文件中引导，以便在完全加载DOM时加载angular。

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