web-dev-qa-db-ja.com

サイズ変更divでのangle2変更検出

レイアウトにbootstrap=を使用し、bootstrapたとえばwidth = 25％のDIVの自動計算サイズが変更されているかどうかを確認する必要があります。

テンプレートに設定されていないが、ブートストラップによって設定されている属性の変更検出を行う可能性はありますか。 （window：resize）では不十分です。

tHX

resizeangularangular2-changedetection
16
Michael Burger

divにディレクティブを追加し、ライフサイクルフックngDoCheck()を実装して、独自の変更検出ロジックを実行できます。 ElementRefを挿入する必要があります。

_constructor(private _elRef:ElementRef) {}
ngDoCheck() {
   // use ElementRef to examine the div property of interest
_

divがコンポーネントテンプレート内にある場合、ローカルテンプレート変数を追加します

_<div #myDiv ...>
_

次に、@ViewChild()を使用してdivへの参照を取得し、ライフサイクルフックngDoCheck()またはngAfterViewChecked()を実装して、独自の変更検出ロジックを実行します。

_@ViewChild('myDiv') theDiv:ElementRef;
ngAfterViewChecked() {
   // use this.theDiv to examine the div property of interest
_

NgDoCheck（）およびngAfterViewChecked（）は、変更検出が実行されるたびに呼び出されることに注意してください。開発者ガイド Lifecycle Hooks も参照してください。

25
Mark Rajcok

私は同じ問題を抱えていたので、Angular-Resize-Eventと呼ばれる軽量ライブラリを使用しました

https://www.npmjs.com/package/angular-resize-event

<div (resized)="onResized($event)"></div>

インストール後、この出力イベントを、サイズの変更を確認するdivに追加するだけです。

3
Dilshan Liyanage

私は正しい答えを試しましたが、リフレッシュレートはあまり正確ではなかったので、別の解決策を探しました。

ここにあります

// Directive
@Directive({
  selector: '[resize-detector]',
})

public constructor(public element: ElementRef<HTMLElement>) {}

public ngOnInit(): void {
// Call detectResize as whe the element inits the windows resize event most likely won't trigger
  this.detectResize();
}

// if you need the windowDimensions add ", [$event]" to @HostListener and pass event to detectResize(event)
@HostListener('window:resize') 
public detectResize(): void {
  console.log(element.nativeElement.offsetWidth);
  console.log(element.nativeElement.offsetHeight);
  // Do you magic here ...
}

次に、次のような要素で使用できます。

<app-component resize-detector></app-component>
0
T04435

DOM属性の変更を追跡する方法はいくつかあります。

0
kemsky