1. ホーム
  2. angular

[解決済み] Angular2の$document.ready()に相当します。

2022-02-19 03:26:41

質問

シンプルな質問ですね。

Angular2の$document.ready()が実行されたときにスクリプトを実行したいのですが、どうすればいいですか?これを達成するための最良の方法は何ですか?

の末尾にスクリプトを記述してみました。 index.html しかし、私が発見したように、これはうまくいきません! コンポーネント宣言のようなものに入れる必要があるのでしょうか?

からのスクリプトの読み込みを実行することは可能ですか? .js ファイルを作成できますか?

EDIT - コードです。

私は以下の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の外部でリッスンします。

これは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'));
  }
}