テンプレートに「ヘッダー」、「コンテンツ」、および「フッター」divが含まれているコンポーネントがあります。コンテンツ div で、div 要素にオーバーフローがあるかどうかをチェックする新しいカスタム ディレクティブを設定しました。このステップまでは、すべて正常に動作します。次に、ディレクティブからホスト コンポーネントに hasOverflow データを送信して、コンポーネントが「もっと見る」ボタンやその他の構成を表示するかどうかを認識できるようにします。
私の質問は、内部 div の ('content') ディレクティブからそのホスト コンポーネントにどのように通信できるかということです。
更新 - コード サンプルの追加
tile.component.ts
<div class="tile" >
<div class="header">
...
</div>
<div class="content" checkOverflow>
... tile content that may be long and contains the chaeckOverflow directive ...
<div class="footer">
...
</div></div>
checkOverflow.ditective.ts
import { Directive, ElementRef, AfterViewInit } from '@angular/core';
@Directive({
selector: '[checkOverflow]'
})
export class OverflowDirective implements AfterViewInit {
constructor(private el: ElementRef) {
}
ngAfterViewInit(): void {
if (this.el.nativeElement.offsetHeight < this.el.nativeElement.scrollHeight) {
console.log('Element has overflow');
} else {
console.log('Element has no overflow');
}
}