Question

这是我的代码指令：

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[appScrollToEnd]'
}) 
export class ScrollToEndDirective {
  constructor(private element: ElementRef) { }
  @HostListener('scroll') onScroll(){
    console.log(this.element
  } 
}

并在我的视图模板中

<div class="content" appScrollToEnd="functionInComponent($event)"></div>

滚动时如何调用方法functionInComponent()。我知道angular2可以监听事件滚动，但我的目的是从指令调用组件的方法。感谢

Answer 1

你可以在你的指令中有一个@Output事件，并在你使用它的任何地方将它绑定到某个组件方法，

@Directive({
  selector: '[appScrollToEnd]'
}) 
export class ScrollToEndDirective {
  @Output() appScrollToEnd = new EventEmitter();

  constructor(private element: ElementRef) { }

  @HostListener('scroll') onScroll(){
    this.appScrollToEnd.emit('someValue');
  } 
}


@Component({
  selector: 'my-app',
  template: `
    <div class="content" (appScrollToEnd)="functionInComponent($event)">
      <div class="text">Some text</div> 
    </div>
  `,
})
export class App {
  functionInComponent(e) {
    console.log(e):
  }
}

感谢@yurzui的Plunker样本。

以下是Plunker!!

Answer 2

为什么不注入像

这样的实际组件

UITabBar

official Docker documentation

从角度2中的指令调用组件的方法

2 个答案: