Question

我有一个组件，它的模板包含＆＃39;标题＆＃39;，＆＃39;内容＆＃39;和＆＃39;页脚＆＃39; div的。在内容div中，我设置了一个新的自定义指令，用于检查div元素是否有溢出。直到这一步一切正常。接下来，我想从我的指令中将hasOverflow数据传递给它的主机组件，以便组件知道是否显示更多＆＃39;按钮和其他配置。

我的问题是如何将内部div（＆＃39; content＆＃39;）指令与其主机组件进行通信？

更新 - 添加代码示例

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');
      }
}

Answer 1

您可以使用EventEmitter。

Angular 2：指令和主机组件之间的通信

1 个答案: