web-dev-qa-db-ja.com

Angular2-ngAfterViewCheckedは何度も呼び出されます。DOMが完全にロードされた後に一度だけメソッドを呼び出す方法は？

jqueryプラグインをTypeScriptを使用してAngular2のラジオボタンに適用する必要があります。

ngAfterViewCheckedに代入すると、何度も呼び出され、コントロールが複数回更新されます。

DOMの準備ができた後にjavascriptメソッドを呼び出すための代替ソリューションは何ですか？

angularangular-lifecycle-hooks
10
Kcs

ngAfterViewInitを試してみてください ここ を見てください。

11
selem mn

DOMツリーに変更が加えられると、ngAfterViewChecked()が呼び出されます。

したがって、DOMツリーが何度も変更された場合、ngAfterViewChecked（）メソッドが何度も呼び出されます。

このメソッドにはビジネスロジックを含めないことをお勧めします。ただし、代わりに画面の更新に関連するロジックのみがあり、新しいメッセージが着信した場合にウィンドウを下にスクロールします。

1
Richard

DOMの準備ができているかどうかに依存するとき、私はngAfterViewCheckedを使用しています。

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

export class NavBar implements AfterViewChecked{

   ngAfterViewChecked(){
      // jquery code here
   }
}
1
Amr AbdelRahman

私はあなたが何をすべきか、または達成する必要があるのか​​正確にはわかりませんが、同様のユースケースに対する私の解決策を紹介します。

私の問題は、ロード時にdivを下にスクロールする必要があることでした。 AfterViewCheckedは複数回実行されましたが、このライフサイクルで下にスクロールする必要がありました。それは私がやったことです、多分それはあなたを助けるでしょう：

    public scrollSuccessfull = false; // global variable


    public ngAfterViewChecked(): void {
        if (!this.scrollSuccessful) {
          // gets executed as long as the scroll wasnt successfull, so the (successful) scroll only gets executed once
          this.scrollSuccessful = this.scrollToBottom(this.internal ? this.internalChatDiv : this.externalChatDiv);
        }
      }

    private scrollToBottom(element: ElementRef): boolean {
        if (element) {
          element.nativeElement.scrollTop = element.nativeElement.scrollHeight;
          return element.nativeElement.scrollTop !== 0;
        }

        return false;
      }
0
Severin Toldo