0
Ich habe eine Komponente, deren Vorlage 'Header', 'Inhalt' und 'Fußzeile' divs enthält. Im Inhalts-Div habe ich eine neue benutzerdefinierte Direktive gesetzt, die überprüft, ob das Div-Element einen Überlauf hat. Bis zu diesem Schritt funktioniert alles gut. Als nächstes möchte ich hasoverflow Daten von meiner Direktive zu seiner Host-Komponente, so dass die Komponente weiß, ob "show more" -Knopf und andere Konfigurationen anzuzeigen.Angular 2: Kommunikation zwischen Direktive und Host-Komponente
Meine Frage ist, wie kann von meiner inneren div (Direktive 'content') zu seiner Host-Komponente kommunizieren?
UPDATE - Hinzufügen von Codebeispiel
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');
}
}