我有一个组件，它的模板包含“页眉”、“内容”和“页脚”div。在内容 div 中，我设置了一个新的自定义指令，用于检查 div 元素是否溢出。直到这一步一切正常。接下来，我想将数据从我的指令中溢出到它的主机组件，以便组件知道是否显示“显示更多”按钮和其他配置。
我的问题是如何从我的内部 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');
}
}