0
템플리트의 구성 요소에 'header', 'content'및 'footer'div가 있습니다. 콘텐츠 div에서 div 요소에 오버플로가 있는지 확인하는 새 사용자 지정 지시문을 설정했습니다. 이 단계까지 모든 것이 잘 작동합니다. 다음으로, hasoverflow 데이터를 내 지시문에서 호스트 구성 요소로 전달하여 구성 요소가 '더보기'버튼과 다른 구성을 표시할지 안다.각도 2 : 지시문과 호스트 구성 요소 간의 통신
제 질문은 내 내부 div ('content') 지시문에서 호스트 구성 요소로 어떻게 통신 할 수 있습니까?
UPDATE - 추가 코드 샘플
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');
}
}