web-dev-qa-db-ja.com

Angular2 ngAfterViewInitはいつ呼び出されますか？

Angularコンポーネントビューが数値を星に変換するために初期化された後に実行するjQueryコードが必要です。

NgAfterViewInit関数にコードを入れましたが、必要なことをしていません。関数にブレークポイントを設定すると、ngAfterViewInit関数が呼び出されるまでにコンポーネントのHTMLのほとんどがロードされていないことがわかります。ロードされていない部分は、* ngForディレクティブを使用して生成されます。

このディレクティブが操作する必要のあるすべてのhtmlを生成した後にコードを実行するにはどうすればよいですか？

javascriptjquerytypescriptangular
24
Gabe O'Leary

NgAfterViewInitはいつ呼び出されますか？

ngAfterViewInit()は、コンポーネントのビューとその子のビューが作成された後に呼び出す必要があります。これをテストしたところ、子供のngAfterViewInit() sが親のngAfterViewInit()の前に呼び出されることがわかりました。

「コンポーネントのHTMLのほとんどがロードされていません」と言うとき、「ロード」とはどういう意味ですか？ HTMLは子コンポーネントのテンプレートにありますか、それとも他の手段でロード（または生成）されていますか？

このディレクティブが操作する必要のあるすべてのhtmlを生成した後、どのようにコードを実行できますか？

ディレクティブコードを確認すると役立ちます。ディレクティブが何らかの方法でAngularテンプレートに含まれないHTMLを生成する場合、レンダリングが完了したときに親に通知するために（たとえば、出力プロパティを使用して）手動でイベントをトリガーする必要があります。 setTimeout()を使用できます（しかし、それは信頼できません）。

Angularコンポーネントビューが数値を星に変換するために初期化された後に実行するjQueryコードが必要です。

これらの数値はどこから取得していますか？サーバーから動的にロードされる場合、データが到着したときにイベントをトリガーし、その時点でビューを更新できます。

また、入力プロパティとして数値を受け取り、NgForを使用して星を生成するコンポーネントを作成してみませんか？

22
Mark Rajcok

準備ができているDOMに依存している場合、ngAfterViewCheckedを使用しています。

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

export class Spreadsheet implements AfterViewChecked{

   ngAfterViewChecked(){

   }
}
23
TGH