$ 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を使用するには、$を次のように宣言するだけ です。declarevar$：any;

受け入れられた答えは正しくなく、質問を考慮してそれを受け入れることは意味がありません

ngAfterViewInitは、DOMの準備ができたときにトリガーされます

ngOnInitは、ページコンポーネントの作成が開始されたときにトリガーされます

あなたにmain.tsのDOMが完全にロードされるときにDOMContentLoaded後のファイルのブートストラップの角度がロードされますので。

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