0

angular は複数のコンポーネントを持つ 1 つのページ アプリケーションであり、ルートを使用してページ間をやり取りすることを理解しています。

そのようなAngularアプリがあります。要件の 1 つは、特定のコンポーネントで、eventListener を DomContentLoaded イベントに追加する必要があることです。

index.html ページはかなり前にロードされている (そのため、DomContentLoaded イベントが発生している) ため、問題があります。

DomContentLoaded イベントを再トリガーする方法が見つかりません。

4

4 に答える 4

0

なぜ DomContentLoaded を angular でリッスンする必要があるのか​​ 正確にはわかりません。そこにはたくさんの機能があるため、使用する angular のバージョンによって異なります。

export class SomeComponent implements AfterViewInit {
 ngAfterViewInit(): void {
 }

}

ただし、*ngIf (Angular2+) または ng-if (AngularJS) を使用してコンポーネントのレンダリングを再トリガーできます。そこにブール値を入れて、イベントでブール値を切り替えるだけです。

于 2018-09-04T09:29:14.560 に答える
0

そのようなリスナーは使用しないようにしてください。Angular では (多くの場合) 必要ありません。コンポーネントのライフサイクル フックを使用してみてください。

あなたの場合、コンポーネントのレンダリングが終了したときに起動するngAfterViewChecked()を使用することをお勧めします。

import { Component, AfterViewChecked } from '@angular/core';

@Component({
  ...
})
export class WidgetLgFunnelsComponent implements AfterViewChecked {
  ngAfterViewChecked() {
    console.log('Component finished rendering!')
  }
}
于 2018-09-04T09:29:25.997 に答える
0

コンポーネントのテンプレート内の DOM 要素で何かを行いたい場合、それらがそこにあることを確認したい場合は、ngAfterViewInitangular のフックを使用する必要があります。

@Component({
  // ...
})
export class SomeComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    // here you can be sure that the template is loaded, and the DOM elements are available
  }
}
于 2018-09-04T09:29:32.183 に答える
0

最初のコンポーネントが作成される前に DomContentLoaded イベントが発生しました。ただし、ngAfterViewInit()メソッドを使用することはできます。 ngAfterViewInit()Angular がコンポーネントのビューの初期化を完了した直後に呼び出されるコールバック メソッドです。ビューがインスタンス化されるときに一度だけ呼び出されます。

class YourComponent {
    ngAfterViewInit() {
        // Your code here
    }
}

とにかく DomContentLoaded イベントをキャッチする必要がある場合は、main.ts ファイルで行います。

于 2018-09-04T09:30:22.610 に答える