2016-07-29 5 views
0

テンプレートのコンポーネントに 'header'、 'content'、 'footer' divが含まれています。 コンテンツdivで、div要素にオーバーフローがあるかどうかを確認する新しいカスタムディレクティブを設定しました。このステップまではすべて正常に動作します。 次に、私のディレクティブのデータをホストコンポーネントにオーバーフローさせ、コンポーネントが 'もっと表示する'ボタンやその他の設定を表示するかどうかを知りたいとします。角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'); 
     } 
} 

答えて

関連する問題