レイアウトにbootstrap=を使用し、bootstrapたとえばwidth = 25%のDIVの自動計算サイズが変更されているかどうかを確認する必要があります。
テンプレートに設定されていないが、ブートストラップによって設定されている属性の変更検出を行う可能性はありますか。 (window:resize)では不十分です。
tHX
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 も参照してください。
私は同じ問題を抱えていたので、Angular-Resize-Eventと呼ばれる軽量ライブラリを使用しました
https://www.npmjs.com/package/angular-resize-event
<div (resized)="onResized($event)"></div>
インストール後、この出力イベントを、サイズの変更を確認するdivに追加するだけです。
私は正しい答えを試しましたが、リフレッシュレートはあまり正確ではなかったので、別の解決策を探しました。
ここにあります
// 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>
DOM属性の変更を追跡する方法はいくつかあります。
setInterval
DOMAttrModified
+ propertychange
for IEMutationObserver